/* ========================================================================== Puertas — theme.css Tokens y componentes del header, menú lateral y footer (sistema rh-*), portado desde el proyecto hermano people-pro. Todos los tokens de color de marca (--rh-accent*) se derivan del azul corporativo del proyecto (--bs-primary: #24369e en style.css y su escala --bs-primary-tint-*/shade-*). El header y el logo del sidebar usan el hex directo (no la variable) porque var(--rh-accent) no se resolvía de forma confiable en esos selectores. 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-*). ========================================================================== */ body, .rh-shell { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } :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; /* Azul corporativo (misma escala que --bs-primary-tint-*/shade-* en style.css) */ --rh-accent: #24369E; --rh-accent-ink: #16205F; --rh-accent-soft: #E9EBF5; --rh-header-strong: var(--rh-surface); --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; /* Azul más claro/saturado para contraste sobre fondo oscuro */ --rh-accent: #505EB1; --rh-accent-ink: #D3D7EC; --rh-accent-soft: #0E163F; --rh-header-strong: var(--rh-surface); --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: 68px 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: #F5F6F8 !important; 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: 68px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--rh-header-strong); text-decoration: none; border-bottom: 1px solid var(--rh-border); } .rh-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; background: #24369E !important; 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; } body.dark .rh-mark { background: #505EB1 !important; } .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: #24369E !important; box-shadow: var(--rh-shadow-sm); display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; padding: 0 20px; min-width: 0; height: 68px; max-height: 68px; overflow: hidden; position: sticky; top: 0; z-index: 1020; } body.dark .rh-topbar { background: #505EB1 !important; } /* El dropdown de perfil (y cualquier otro) vive dentro del topbar y necesita salirse de su alto fijo de 68px al abrirse; si no, overflow:hidden lo recorta. */ .rh-topbar:has(.dropdown-menu.show) { overflow: visible; } .rh-topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; } .rh-topbar .rh-mark { background: rgba(255, 255, 255, .16) !important; } .rh-topbar .rh-brand-word { color: #fff !important; } .rh-topbar .rh-brand-sub { color: rgba(255, 255, 255, .7) !important; } .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-topbar .rh-caret { color: rgba(255, 255, 255, .7); } .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-outline { border-color: var(--rh-border-strong); } .rh-icon-btn svg { width: 18px; height: 18px; } .rh-topbar .rh-icon-btn { color: rgba(255, 255, 255, .85) !important; } .rh-topbar .rh-icon-btn:hover { background: rgba(255, 255, 255, .16) !important; color: #fff !important; } .rh-topbar .rh-theme-toggle { background: rgba(255, 255, 255, .16) !important; color: #fff !important; } .rh-topbar .rh-theme-toggle:hover { background: rgba(255, 255, 255, .24) !important; filter: none; color: #fff !important; } .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(255, 255, 255, .28) !important; } .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); } .rh-topbar .rh-topbar-user:hover { background: rgba(255, 255, 255, .16) !important; } .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); } .rh-topbar .rh-topbar-user .rh-user-meta .rh-name { color: #fff !important; } .rh-topbar .rh-topbar-user .rh-user-meta .rh-role { color: rgba(255, 255, 255, .7) !important; } .rh-topbar .rh-avatar { background: rgba(255, 255, 255, .2) !important; color: #fff !important; } /* ---------------- Loader inicial de página ---------------- */ #loading .loader.simple-loader { background: #F4F7F7 !important; } body.dark #loading .loader.simple-loader { background: #0D1719 !important; } .rh-loader { display: flex; flex-direction: column; align-items: center; gap: 18px; } .rh-loader-badge { position: relative; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; } .rh-loader-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #E9EBF5; border-top-color: #24369E; border-right-color: #24369E; animation: rh-loader-spin .9s cubic-bezier(.6, 0, .4, 1) infinite; } body.dark .rh-loader-ring { border-color: #16205F; border-top-color: #505EB1; border-right-color: #505EB1; } .rh-loader-mark { width: 44px; height: 44px; border-radius: 12px; background: #24369E !important; 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; box-shadow: 0 8px 18px -6px rgba(36, 54, 158, .5); animation: rh-loader-pulse 1.8s ease-in-out infinite; } body.dark .rh-loader-mark { background: #505EB1 !important; box-shadow: 0 8px 18px -6px rgba(80, 94, 177, .5); } .rh-loader-mark svg { width: 22px; height: 22px; } .rh-loader-word { font-size: 14.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #16205F; font-family: var(--bs-body-font-family, sans-serif); } body.dark .rh-loader-word { color: #D3D7EC; } .rh-loader-dots { display: flex; gap: 6px; } .rh-loader-dots span { width: 6px; height: 6px; border-radius: 50%; background: #24369E; opacity: .3; animation: rh-loader-dot 1.1s ease-in-out infinite; } body.dark .rh-loader-dots span { background: #505EB1; } .rh-loader-dots span:nth-child(2) { animation-delay: .15s; } .rh-loader-dots span:nth-child(3) { animation-delay: .3s; } @keyframes rh-loader-spin { to { transform: rotate(360deg); } } @keyframes rh-loader-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes rh-loader-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .rh-loader-ring, .rh-loader-mark, .rh-loader-dots span { 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, Proyectos, etc.) ========================================================================== */ /* ---------------- Card ---------------- */ .rh-card { background: #FFFFFF !important; border: 1px solid var(--rh-border); border-radius: var(--rh-radius); box-shadow: var(--rh-shadow-sm); overflow: hidden; } body.dark .rh-card { background: var(--rh-surface) !important; } .rh-card-sticky { position: sticky; top: 69px; z-index: 35; overflow: visible; } .rh-card-head { position: relative; 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::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #24369E 0%, #6C79C7 100%); } body.dark .rh-card-head::after { background: linear-gradient(90deg, #505EB1 0%, #8890D6 100%); } .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; } .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; } /* Header alterno para cards secundarias (Contactos, Contratos, etc.): franja azul difuminada en vez de línea divisoria sólida. */ .rh-card-head-accent { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; flex-wrap: wrap; background: radial-gradient(160% 220% at 0% -30%, rgba(36, 54, 158, .08) 0%, rgba(36, 54, 158, .025) 45%, transparent 75%), var(--rh-surface-2); } body.dark .rh-card-head-accent { background: radial-gradient(160% 220% at 0% -30%, rgba(80, 94, 177, .18) 0%, rgba(80, 94, 177, .05) 45%, transparent 75%), var(--rh-surface-2); } .rh-card-head-accent h2, .rh-card-head-accent h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--rh-ink); font-family: var(--bs-body-font-family, sans-serif); } .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: 1px solid var(--rh-border-strong); border-radius: 8px; padding: 7px 12px; color: var(--rh-ink-faint); min-width: 220px; transition: border-color .12s ease, box-shadow .12s ease; } .rh-search-box:focus-within { border-color: #24369E; color: #24369E; box-shadow: 0 0 0 3px rgba(36, 54, 158, .12); } body.dark .rh-search-box:focus-within { border-color: #505EB1; color: #505EB1; box-shadow: 0 0 0 3px rgba(80, 94, 177, .18); } .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: #24369E !important; color: #fff !important; } .rh-btn-primary:hover { filter: brightness(1.08); color: #fff !important; } body.dark .rh-btn-primary { background: #505EB1 !important; } .rh-btn-outline-primary { background: transparent; color: #24369E; border: 1px solid #24369E; } .rh-btn-outline-primary:hover { background: rgba(36, 54, 158, .08); color: #24369E; } body.dark .rh-btn-outline-primary { color: #8890D6; border-color: #8890D6; } body.dark .rh-btn-outline-primary:hover { background: rgba(136, 144, 214, .14); color: #8890D6; } .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: #C4433D !important; color: #fff !important; } .rh-btn-danger:hover { filter: brightness(1.08); color: #fff !important; } body.dark .rh-btn-danger { background: #E17168 !important; } .rh-btn-outline-danger { background: transparent; color: #C4433D; border: 1px solid #C4433D; } .rh-btn-outline-danger:hover { background: rgba(196, 67, 61, .08); color: #C4433D; } body.dark .rh-btn-outline-danger { color: #E17168; border-color: #E17168; } body.dark .rh-btn-outline-danger:hover { background: rgba(225, 113, 104, .14); color: #E17168; } .rh-btn-sm { padding: 6px 12px; font-size: 12.5px; } /* ---------------- Tabs controlados por servidor (setTab) ---------------- */ .rh-tab-nav { display: flex; gap: 4px; } .rh-tab-nav .nav-link { border: 0 !important; cursor: pointer; font-size: 12.5px !important; font-weight: 600 !important; padding: 7px 13px !important; border-radius: 999px !important; color: #5B6E71 !important; background: none !important; white-space: nowrap; text-decoration: none; } .rh-tab-nav .nav-link.active { background: #24369E !important; color: #fff !important; } body.dark .rh-tab-nav .nav-link { color: #9BB1B3 !important; } body.dark .rh-tab-nav .nav-link.active { background: #505EB1 !important; color: #fff !important; } .rh-overlay { display: none; position: absolute; inset: 0; z-index: 100; align-items: center; justify-content: center; background: rgba(255, 255, 255, .78) !important; backdrop-filter: blur(1px); border-radius: inherit; } body.dark .rh-overlay { background: rgba(13, 23, 25, .78) !important; } .rh-overlay-box { display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: #fff; border: 1px solid #e5e8ee; border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(20, 30, 50, .3); font-size: 13px; font-weight: 600; color: var(--rh-ink); } body.dark .rh-overlay-box { background: #171d27; border-color: #2a3241; } .rh-spinner { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid #E9EBF5; border-top-color: var(--rh-accent, #24369E); animation: rh-loader-spin .7s linear infinite; } body.dark .rh-spinner { border-color: #16205F; border-top-color: var(--rh-accent, #505EB1); } /* Variante para dentro de botones: usa currentColor para adaptarse al texto del botón (blanco en rh-btn-primary, rojo en rh-btn-outline-danger, etc.), ya que el color de acento fijo de .rh-spinner no siempre contrasta ahí. */ .rh-spinner-sm { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; border: 2px solid currentColor; border-right-color: transparent; animation: rh-loader-spin .7s linear infinite; } @media (prefers-reduced-motion: reduce) { .rh-spinner, .rh-spinner-sm { animation: none; } } .rh-btn:disabled, .rh-btn[disabled] { opacity: .6; cursor: default; filter: none; } /* ---------------- Table ---------------- */ .rh-table-wrap { overflow-x: auto; } .rh-table-wrap:has(.dropdown-menu.show), .rh-card:has(.dropdown-menu.show) { overflow: visible; } .dropdown-menu.show { z-index: 1090; } .rh-card:has(.rh-popover) { overflow: visible; } .rh-table-wrap:has(.rh-popover) { overflow: visible; } body.dark .rh-popover { background: var(--rh-surface) !important; border-color: var(--rh-border) !important; color: var(--rh-ink) !important; } .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) !important; color: var(--rh-ink); vertical-align: middle; } .rh-table tbody tr:hover td { background: var(--rh-surface-2) !important; } .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; } .rh-table-compact thead th { padding: 7px 12px; } .rh-table-compact tbody td { padding: 6px 12px; } .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); } .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); } .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-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); } /* ---------------- 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 ---------------- */ .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; } /* Compact inline variant, for placing stats alongside a title/toolbar */ .rh-stat-mini { display: flex; align-items: center; gap: 7px; background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); padding: 5px 10px; } .rh-stat-mini-icon { width: 22px; height: 22px; border-radius: 7px; 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-mini-icon svg { width: 12px; height: 12px; } .rh-stat-mini-text { font-size: 12px; color: var(--rh-ink-muted); font-weight: 600; line-height: 1.2; white-space: nowrap; } .rh-stat-mini-text b { color: var(--rh-ink); font-variant-numeric: tabular-nums; } /* ---------------- Metric card (resumen de una sola entidad, ej. proyecto seleccionado) ---------------- Franja de numeros alineados en columna, una fila por categoria cuando aplica (ej. Puertas y marcos / Herrajes en control/entregas-reporte). Distinto de rh-stat-grid: ahi cada metrica es su propia tarjeta clicable para navegar; aqui son varias metricas de una sola entidad ya seleccionada, así que van juntas en una sola tarjeta. */ .rh-metric-card { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); box-shadow: var(--rh-shadow-sm); padding: 16px 18px; margin-bottom: 18px; } .rh-metric-row { display: flex; align-items: stretch; } .rh-metric-row + .rh-metric-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rh-border); } .rh-metric-row-tag { flex: none; width: 84px; display: flex; align-items: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rh-ink-faint); } .rh-metric-row-tag.tag-herrajes { color: var(--rh-accent-ink); } .rh-metric-strip { display: flex; flex: 1 1 auto; } .rh-metric { flex: 1 1 0; min-width: 0; padding: 0 10px; text-align: right; border-left: 1px solid var(--rh-border); } .rh-metric:first-child { border-left: 0; padding-left: 0; text-align: left; } .rh-metric-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--rh-ink); } .rh-metric-val.v-warning { color: var(--rh-warning); } .rh-metric-val.v-danger { color: var(--rh-danger); } .rh-metric-val.v-success { color: var(--rh-success); } .rh-metric-lbl { font-size: 10px; font-weight: 600; color: var(--rh-ink-faint); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; } @media (max-width: 575.98px) { .rh-metric-strip { flex-wrap: wrap; row-gap: 8px; } .rh-metric { flex: 1 1 40%; text-align: left; border-left: 0; padding-left: 0; } } /* ---------------- Progress ---------------- */ .rh-progress { height: 6px; border-radius: 999px; background: #EEF2F2 !important; overflow: hidden; } .rh-progress-bar { height: 100%; background: #2E8F5C; 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-warning { background: var(--rh-warning-soft); color: var(--rh-warning); } .rh-alert-info { background: var(--rh-accent-soft); color: var(--rh-accent-ink); } /* ---------------- Login ---------------- */ .rh-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--rh-bg); padding: 24px; } .rh-auth-card { width: 100%; max-width: 380px; } .rh-auth-mark { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px; background: #24369E !important; display: flex; align-items: center; justify-content: center; } .rh-auth-brand-word { font-size: 19px; font-weight: 700; color: var(--rh-ink); font-family: var(--bs-body-font-family, sans-serif); line-height: 1.2; } .rh-auth-brand-sub { font-size: 11px; color: var(--rh-ink-faint); text-transform: uppercase; letter-spacing: .08em; } .rh-auth-title { font-size: 16.5px; font-weight: 700; color: var(--rh-ink); margin: 0 0 18px; font-family: var(--bs-body-font-family, sans-serif); } /* ---------------- 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; max-height: 90vh; display: flex; flex-direction: column; } .rh-modal-header { margin-bottom: 16px; flex: none; } .rh-modal-icon { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--rh-danger-soft); color: var(--rh-danger); display: flex; align-items: center; justify-content: center; } .rh-modal-icon-neutral { background: var(--rh-accent-soft); color: var(--rh-accent); } .rh-modal-icon svg { width: 22px; height: 22px; } .rh-modal h3 { margin: 0; font-size: 17.5px; color: var(--rh-ink); font-family: var(--bs-body-font-family, sans-serif); font-weight: 600; } .rh-modal-content { margin: 0 0 22px; font-size: 13.5px; color: var(--rh-ink-muted); line-height: 1.5; overflow-y: auto; flex: 1 1 auto; padding-right: 4px; } .rh-modal-content b { color: var(--rh-ink); } .rh-modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex: none; } /* ---------------- Formulario en secciones plegables (ej. Generales de proyecto) ---------------- */ .rh-form-actions { position: sticky; top: 69px; z-index: 30; background: #FFFFFF !important; border: 1px solid #DEE6E6; border-radius: var(--rh-radius); box-shadow: 0 1px 2px rgba(15, 35, 38, .06); display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; margin-bottom: 16px; } body.dark .rh-form-actions { background: #132224 !important; border-color: #223638; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); } .rh-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; align-items: start; margin-bottom: 20px; } .rh-section { background: #FFFFFF !important; border: 1px solid #DEE6E6; border-radius: var(--rh-radius); box-shadow: 0 1px 2px rgba(15, 35, 38, .06); } body.dark .rh-section { background: #132224 !important; border-color: #223638; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); } .rh-section > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 11px; padding: 15px 18px; } .rh-section > summary::-webkit-details-marker { display: none; } .rh-section-icon { width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: #E9EBF5 !important; color: #16205F !important; } body.dark .rh-section-icon { background: #0E163F !important; color: #D3D7EC !important; } .rh-section-icon svg { width: 16px; height: 16px; } .rh-section-heading { flex: 1 1 auto; min-width: 0; } .rh-section-heading h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--rh-ink); } .rh-section-heading span { font-size: 11.5px; color: var(--rh-ink-faint); } .rh-section-chev { width: 15px; height: 15px; color: var(--rh-ink-faint); flex: none; transition: transform .15s ease; } .rh-section[open] > summary .rh-section-chev { transform: rotate(180deg); } .rh-section-body { padding: 16px 18px 18px; border-top: 1px solid #DEE6E6; } body.dark .rh-section-body { border-top-color: #223638; } /* ---------------- Configurador de plantilla (acordeón por nivel) ---------------- */ .rh-card-head-sub { font-size: 12px; color: var(--rh-ink-muted); margin-top: 2px; } .rh-file-btn { position: relative; overflow: hidden; } .rh-file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; width: 100%; } .rh-totals-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--rh-border); } .rh-totals-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rh-ink-faint); margin-right: 2px; } .rh-total-chip { display: inline-flex; align-items: baseline; gap: 5px; background: var(--rh-accent-soft); color: var(--rh-accent-ink); border-radius: 999px; padding: 4px 10px 4px 11px; font-size: 11.5px; font-weight: 600; } .rh-total-chip b { font-size: 13px; font-variant-numeric: tabular-nums; } .rh-niveles-list { display: flex; flex-direction: column; gap: 10px; } .rh-nivel-name { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; border-bottom: 1px dashed transparent; color: var(--rh-ink); font-weight: 700; font-size: 13.5px; font-family: inherit; padding: 2px 2px; } .rh-nivel-name:hover, .rh-nivel-name:focus { border-bottom-color: var(--rh-accent); outline: none; } .rh-nivel-chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 2 1 auto; min-width: 0; } .rh-mini-chip { font-size: 10.5px; font-weight: 700; background: var(--rh-surface); color: var(--rh-ink-muted); border: 1px solid var(--rh-border); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; } .rh-section-actions { display: flex; align-items: center; gap: 2px; flex: none; } .rh-icon-btn-primary { color: var(--rh-accent); } .rh-icon-btn-primary:hover { background: var(--rh-accent-soft); color: var(--rh-accent); } .rh-icon-btn-danger { color: var(--rh-danger); } .rh-icon-btn-danger:hover { background: var(--rh-danger-soft); color: var(--rh-danger); } .rh-chip-anticipo { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; font-weight: 700; padding: 3px 5px 3px 10px; border-radius: 999px; background: #E9EBF5 !important; color: #16205F !important; white-space: nowrap; transition: filter .12s ease; } .rh-chip-anticipo:hover { filter: brightness(0.96); } body.dark .rh-chip-anticipo { background: #0E163F !important; color: #D3D7EC !important; } .rh-chip-anticipo > button { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; } .rh-chip-anticipo > button:hover { background: rgba(15, 35, 38, .14); } .rh-chip-anticipo > button svg { width: 10px; height: 10px; } .rh-chip-anticipo-delete { color: var(--rh-danger) !important; } .rh-chip-anticipo-delete:hover { background: var(--rh-danger-soft) !important; } /* Popover de info al pasar el mouse sobre el chip de anticipo */ .rh-anticipo-popover { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px); min-width: 190px; padding: 10px 12px; border-radius: 8px; z-index: 60; background: #FFFFFF; border: 1px solid var(--rh-border); color: var(--rh-ink); box-shadow: 0 8px 24px -8px rgba(15, 35, 38, .28); font-size: 11.5px; font-weight: 500; line-height: 1.6; white-space: normal; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, transform .12s ease; } .rh-anticipo-popover::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #FFFFFF; } body.dark .rh-anticipo-popover { background: var(--rh-surface); border-color: var(--rh-border); } body.dark .rh-anticipo-popover::after { border-top-color: var(--rh-surface); } .rh-chip-anticipo:hover .rh-anticipo-popover, .rh-chip-anticipo:focus-visible .rh-anticipo-popover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .rh-anticipo-popover-row b { color: var(--rh-ink); font-weight: 700; } .rh-anticipo-popover-row + .rh-anticipo-popover-row { margin-top: 2px; } .rh-anticipo-popover-hint { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rh-border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rh-ink-faint); } .rh-card:has(.rh-anticipo-popover) { overflow: visible; position: relative; z-index: 70; } /* Popover de confirmación al eliminar un anticipo (se abre hacia abajo, para no chocar con el popover de info que se abre hacia arriba). */ .rh-anticipo-confirm-popover { position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%); min-width: 180px; padding: 12px; border-radius: 8px; z-index: 61; background: #FFFFFF; border: 1px solid var(--rh-border); box-shadow: 0 8px 24px -8px rgba(15, 35, 38, .28); white-space: normal; text-align: center; cursor: default; } .rh-anticipo-confirm-popover::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #FFFFFF; } body.dark .rh-anticipo-confirm-popover { background: var(--rh-surface); border-color: var(--rh-border); } body.dark .rh-anticipo-confirm-popover::after { border-bottom-color: var(--rh-surface); } .rh-anticipo-confirm-popover p { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--rh-ink); } .rh-card:has(.rh-anticipo-confirm-popover) { overflow: visible; position: relative; z-index: 70; } /* ---------------- Contratos (tarjeta por contrato) ---------------- */ .rh-contrato-item { border: 1px solid var(--rh-border); border-radius: 10px; padding: 14px 16px; } .rh-contrato-item + .rh-contrato-item { margin-top: 12px; } .rh-contrato-item-head { display: flex; align-items: flex-end; gap: 12px; } .rh-contrato-item-fields { flex: 1 1 auto; } .rh-contrato-item-delete { flex: none; } .rh-contrato-item-anticipos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rh-border); } .rh-contrato-item-anticipos-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rh-ink-faint); flex: none; margin-right: 2px; } /* ---------------- Control de instalación (bitácora por nivel) ---------------- Usado en livewire/control/instalacion-detalle.blade.php. Reutiliza rh-greet, rh-stat-grid, rh-card, rh-section (acordeón), rh-table y rh-pill ya definidos arriba (mismo encabezado que lista-asignaciones-seguimiento); aquí solo lo que esa pantalla necesita de más: el encabezado de 2 filas P/I/D/DF por puerta, sus celdas compactas, la fila de totales por nivel, y tarjetas de estadística / pills en color sólido (sin el fondo suave/pastel que usan por defecto en el resto del sitio) para que resalten dentro de la tabla. */ .bitacora-inst .rh-stat-icon { color: #fff; } .bitacora-inst .rh-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--rh-ink-faint); margin-bottom: 14px; } .bitacora-inst .rh-legend span { display: inline-flex; align-items: center; gap: 5px; } .bit-dash { color: var(--rh-ink-faint); opacity: .5; } .bit-colhead-group { border-left: 2px solid var(--rh-border-strong); } .bit-colhead-nombre { display: block; font-size: 9.5px; font-weight: 400; color: var(--rh-ink-faint); margin-top: 1px; text-transform: none; letter-spacing: 0; } .bit-stats-table thead th.bit-subhead { font-size: 10px; font-weight: 700; color: var(--rh-ink-faint); text-align: center !important; padding: 4px 6px 8px !important; text-transform: none; background: var(--rh-surface-2); } .bit-subhead-first { border-left: 2px solid var(--rh-border-strong); } .bit-stats-table tbody td.bit-stat { padding: 6px 8px !important; text-align: center; font-variant-numeric: tabular-nums; } .bit-stat-first { border-left: 2px solid var(--rh-border-strong); font-weight: 600; } tr.bit-total-row td { background: var(--rh-surface-2) !important; font-weight: 700; border-bottom: 2px solid var(--rh-border-strong) !important; } tr.bit-total-row td.rh-col-sticky { text-transform: uppercase; font-size: 11px; letter-spacing: .03em; color: var(--rh-ink-muted); } .bitacora-inst .rh-pill { font-weight: 600; } .bitacora-inst .rh-pill-warning { background: var(--rh-warning); color: #fff; } .bitacora-inst .rh-pill-danger { background: var(--rh-danger); color: #fff; } .bitacora-inst .rh-pill-success { background: var(--rh-success); color: #fff; } .bit-stat .rh-pill { font-size: 10.5px; padding: 2px 8px; } /* ---------------- Seguimiento de entregas (flujo en 2 pasos) ---------------- Usado en livewire/seguimiento/entregas-list.blade.php: Paso 1 "Datos de la entrega" y Paso 2 "Accesorios a entregar", cada uno su propia rh-card con rh-card-head-accent. Numerar los pasos aqui tiene sentido porque es una secuencia real de captura, no una lista arbitraria. */ .rh-step-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rh-accent); margin: 0 0 2px; } .rh-card-body-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--rh-border); flex-wrap: wrap; } .rh-step-progress { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rh-ink-muted); } .rh-step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rh-success); display: inline-block; }