/* ============================================================================ MOD-281 · HUMANZ PRO — el revestimiento de las vistas heredadas ---------------------------------------------------------------------------- SÓLO CSS. Ni una línea de la lógica de Humanz se toca: los cálculos de nómina, faltas, bonos, vacaciones y horas extra son 5.300 líneas que hoy funcionan y que nadie va a tocar por un tema de aspecto. Lo que hace este archivo es vestir el MARCADO QUE YA EXISTE. Las vistas heredadas usan clases genéricas de `app.css` —`.finp`, `.fsel`, `.fbtn`, `.fld`, `.mo-box`…— más las suyas `.hz-*`. Aquí se redefinen esas mismas clases, pero SÓLO dentro de Humanz, para que el resto de OMNIA siga igual. DOS ÁMBITOS, y los dos son cerrados: · `#page-humanz-pro.humanz-pro-v2` — las vistas. · los ocho modales, que se cuelgan de y por eso no caben en el ámbito anterior: `mo-hz-*`, `mo-humanz-det`, `mo-humanz-rol`. NADA DE `!important` salvo donde hay que vencer un `style=` escrito en el HTML de las vistas viejas, y en esos casos está comentado por qué. Un `!important` suelto aquí acabaría peleándose con el módulo que lo puso. El lenguaje: Notion, Linear, GitHub. Aire, jerarquía por tamaño y color, bordes de 1 px, cero degradados, cero sombras dramáticas. Que Recursos Humanos sea un tema aburrido no obliga a que su pantalla lo sea. ========================================================================== */ /* Los modales heredan la paleta del shell. Se declara en los dos ámbitos porque el modal vive fuera de la página. */ #page-humanz-pro.humanz-pro-v2, [id^="mo-hz-"], #mo-humanz-det, #mo-humanz-rol { --hzk-sur: var(--hz-sur, #fff); --hzk-sur2: var(--hz-sur2, #f4f5f7); --hzk-bd: var(--hz-bd, #e2e5e9); --hzk-bd2: var(--hz-bd2, #d2d6dc); --hzk-tx: var(--hz-tx, #17191d); --hzk-tx2: var(--hz-tx2, #525866); --hzk-mut: var(--hz-mut, #858b98); --hzk-ac: var(--hz-ac, #3169e8); --hzk-r: 9px; } /* ══════════════════════════════════════════════════════════════════════════ 1 · TIPOGRAFÍA Y TÍTULOS ══════════════════════════════════════════════════════════════════════════ */ /* Los títulos de sección venían en mayúsculas con un icono pegado. En Notion un encabezado es texto, no un cartel. */ #page-humanz-pro.humanz-pro-v2 .hz-secc-titulo, #page-humanz-pro.humanz-pro-v2 .sec-t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--hzk-tx); margin: 0 0 14px; display: flex; align-items: center; gap: 9px; } #page-humanz-pro.humanz-pro-v2 .hz-secc-titulo i, #page-humanz-pro.humanz-pro-v2 .sec-t i { color: var(--hzk-mut); font-size: 13px; } #page-humanz-pro.humanz-pro-v2 .hz-secc { margin-bottom: 30px; } /* ══════════════════════════════════════════════════════════════════════════ 2 · CAJAS ══════════════════════════════════════════════════════════════════════════ */ #page-humanz-pro.humanz-pro-v2 .hz-card, #page-humanz-pro.humanz-pro-v2 .bx, #page-humanz-pro.humanz-pro-v2 .hz-perfil-box { background: var(--hzk-sur); border: 1px solid var(--hzk-bd); border-radius: 12px; box-shadow: none; /* la profundidad la da el borde */ transition: border-color .14s; } #page-humanz-pro.humanz-pro-v2 .hz-card:hover { border-color: var(--hzk-bd2); } #page-humanz-pro.humanz-pro-v2 .hz-grid { gap: 14px; } /* Ficha de empleado: el identificador se retira, el nombre manda. */ #page-humanz-pro.humanz-pro-v2 .hz-card-id { font-size: 10px; letter-spacing: .07em; color: var(--hzk-mut); font-weight: 500; } #page-humanz-pro.humanz-pro-v2 .hz-card-nom { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--hzk-tx); } #page-humanz-pro.humanz-pro-v2 .hz-card-puesto { font-size: 12.5px; color: var(--hzk-ac); font-weight: 500; } #page-humanz-pro.humanz-pro-v2 .hz-card-label, #page-humanz-pro.humanz-pro-v2 .hz-card-empresa { font-size: 11px; color: var(--hzk-mut); } /* Las etiquetas de rol eran rectángulos con borde duro; ahora son pastillas tenues, que es como se lee un metadato y no un botón. */ #page-humanz-pro.humanz-pro-v2 .hz-rol-chip, #page-humanz-pro.humanz-pro-v2 .hz-card-roles > span { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; background: var(--hzk-sur2); border: 1px solid var(--hzk-bd); font-size: 10.5px; font-weight: 500; color: var(--hzk-tx2); letter-spacing: .01em; } /* ══════════════════════════════════════════════════════════════════════════ 3 · FILAS · nómina, asuetos, permisos ══════════════════════════════════════════════════════════════════════════ */ #page-humanz-pro.humanz-pro-v2 .hz-row, #page-humanz-pro.humanz-pro-v2 .asu-row { background: var(--hzk-sur); border: 1px solid var(--hzk-bd); border-radius: 11px; transition: border-color .14s, background .14s; } #page-humanz-pro.humanz-pro-v2 .hz-row:hover, #page-humanz-pro.humanz-pro-v2 .asu-row:hover { border-color: var(--hzk-bd2); } /* ══════════════════════════════════════════════════════════════════════════ 4 · CONTROLES ══════════════════════════════════════════════════════════════════════════ */ #page-humanz-pro.humanz-pro-v2 .finp, #page-humanz-pro.humanz-pro-v2 .fsel, #page-humanz-pro.humanz-pro-v2 input[type="text"], #page-humanz-pro.humanz-pro-v2 input[type="email"], #page-humanz-pro.humanz-pro-v2 input[type="number"], #page-humanz-pro.humanz-pro-v2 input[type="date"], #page-humanz-pro.humanz-pro-v2 select, #page-humanz-pro.humanz-pro-v2 textarea, [id^="mo-hz-"] .finp, #mo-humanz-det .finp, #mo-humanz-rol .finp, [id^="mo-hz-"] .fsel, #mo-humanz-det .fsel, #mo-humanz-rol .fsel, [id^="mo-hz-"] input, #mo-humanz-det input, #mo-humanz-rol input, [id^="mo-hz-"] select, #mo-humanz-det select, #mo-humanz-rol select, [id^="mo-hz-"] textarea, #mo-humanz-det textarea { background: var(--hzk-sur2); border: 1px solid var(--hzk-bd); border-radius: var(--hzk-r); color: var(--hzk-tx); padding: 8px 11px; font-size: 13px; transition: border-color .14s, background .14s; } #page-humanz-pro.humanz-pro-v2 .finp:focus, #page-humanz-pro.humanz-pro-v2 .fsel:focus, #page-humanz-pro.humanz-pro-v2 input:focus, #page-humanz-pro.humanz-pro-v2 select:focus, #page-humanz-pro.humanz-pro-v2 textarea:focus, [id^="mo-hz-"] input:focus, #mo-humanz-det input:focus, #mo-humanz-rol input:focus, [id^="mo-hz-"] select:focus, #mo-humanz-det select:focus, [id^="mo-hz-"] textarea:focus, #mo-humanz-det textarea:focus { background: var(--hzk-sur); border-color: var(--hzk-ac); outline: none; } /* Las etiquetas de campo: pequeñas, tenues y sin gritar. */ #page-humanz-pro.humanz-pro-v2 .fld > label, #page-humanz-pro.humanz-pro-v2 .lbl, [id^="mo-hz-"] .fld > label, #mo-humanz-det .fld > label, #mo-humanz-rol .fld > label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--hzk-mut); text-transform: uppercase; } /* Botones. El primario lleva texto BLANCO fijo: el acento es oscuro en los dos temas y un texto oscuro encima se vuelve ilegible — el mismo fallo que ya se arrastraba en el modal del live bait. */ #page-humanz-pro.humanz-pro-v2 .fbtn, #page-humanz-pro.humanz-pro-v2 .bbtn, [id^="mo-hz-"] .fbtn, #mo-humanz-det .fbtn, #mo-humanz-rol .fbtn { background: var(--hzk-ac); border: 1px solid var(--hzk-ac); color: #fff; font-weight: 600; font-size: 13px; padding: 8px 15px; border-radius: var(--hzk-r); cursor: pointer; transition: filter .14s; } #page-humanz-pro.humanz-pro-v2 .fbtn:hover:not(:disabled), [id^="mo-hz-"] .fbtn:hover:not(:disabled), #mo-humanz-det .fbtn:hover:not(:disabled) { filter: brightness(1.08); color: #fff; } #page-humanz-pro.humanz-pro-v2 .fbtn-ghost, [id^="mo-hz-"] .fbtn-ghost, #mo-humanz-det .fbtn-ghost, #mo-humanz-rol .fbtn-ghost { background: transparent; border-color: var(--hzk-bd); color: var(--hzk-tx2); font-weight: 500; } #page-humanz-pro.humanz-pro-v2 .fbtn-ghost:hover:not(:disabled), [id^="mo-hz-"] .fbtn-ghost:hover:not(:disabled), #mo-humanz-det .fbtn-ghost:hover:not(:disabled) { border-color: var(--hzk-bd2); color: var(--hzk-tx); filter: none; } #page-humanz-pro.humanz-pro-v2 .fbtn:disabled { opacity: .5; cursor: not-allowed; } /* ══════════════════════════════════════════════════════════════════════════ 5 · TABLAS · asistencia, vacaciones ══════════════════════════════════════════════════════════════════════════ */ #page-humanz-pro.humanz-pro-v2 table { width: 100%; border-collapse: collapse; background: var(--hzk-sur); border: 1px solid var(--hzk-bd); border-radius: 12px; overflow: hidden; } /* `app.css` le pone `min-width:480px` a todas las tablas; dentro de Humanz eso fuerza un scroll horizontal donde no hace falta. */ #page-humanz-pro.humanz-pro-v2 table { min-width: 0; } #page-humanz-pro.humanz-pro-v2 thead th { background: var(--hzk-sur2); border-bottom: 1px solid var(--hzk-bd); padding: 10px 13px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--hzk-mut); text-transform: uppercase; } #page-humanz-pro.humanz-pro-v2 tbody td { padding: 11px 13px; border-bottom: 1px solid var(--hzk-bd); font-size: 13px; color: var(--hzk-tx); } #page-humanz-pro.humanz-pro-v2 tbody tr:last-child td { border-bottom: 0; } #page-humanz-pro.humanz-pro-v2 tbody tr:hover td { background: var(--hzk-sur2); } /* ══════════════════════════════════════════════════════════════════════════ 6 · MODALES ══════════════════════════════════════════════════════════════════════════ */ [id^="mo-hz-"], #mo-humanz-det, #mo-humanz-rol { background: rgba(10, 12, 18, .5); backdrop-filter: blur(2px); } [id^="mo-hz-"] .mo-box, #mo-humanz-det .mo-box, #mo-humanz-rol .mo-box { background: var(--hzk-sur); border: 1px solid var(--hzk-bd); border-radius: 14px; box-shadow: 0 22px 60px rgba(0, 0, 0, .28); color: var(--hzk-tx); } [id^="mo-hz-"] .mo-head, #mo-humanz-det .mo-head, #mo-humanz-rol .mo-head { padding: 15px 18px; border-bottom: 1px solid var(--hzk-bd); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--hzk-tx); text-transform: none; } [id^="mo-hz-"] .mo-body, #mo-humanz-det .mo-body, #mo-humanz-rol .mo-body { padding: 18px; } [id^="mo-hz-"] .mo-foot, #mo-humanz-det .mo-foot, #mo-humanz-rol .mo-foot { padding: 14px 18px; border-top: 1px solid var(--hzk-bd); display: flex; justify-content: flex-end; gap: 9px; } [id^="mo-hz-"] .mo-x, #mo-humanz-det .mo-x, #mo-humanz-rol .mo-x { background: none; border: 0; color: var(--hzk-mut); font-size: 14px; cursor: pointer; } [id^="mo-hz-"] .mo-x:hover, #mo-humanz-det .mo-x:hover { color: var(--hzk-tx); } /* Los bloques del expediente (INFORMACION BASICA, ROLES…) eran recuadros con borde grueso; pasan a ser secciones separadas por una línea. */ #mo-humanz-det fieldset, #mo-humanz-det .sec { border: 1px solid var(--hzk-bd); border-radius: 11px; padding: 15px 16px; margin-bottom: 16px; } #mo-humanz-det legend { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; color: var(--hzk-mut); text-transform: uppercase; padding: 0 6px; } /* ══════════════════════════════════════════════════════════════════════════ 7 · VACÍOS Y AVISOS ══════════════════════════════════════════════════════════════════════════ */ #page-humanz-pro.humanz-pro-v2 .hz-empty, #page-humanz-pro.humanz-pro-v2 .hz-placeholder, #page-humanz-pro.humanz-pro-v2 .hz-soon { padding: 34px 20px; text-align: center; color: var(--hzk-mut); font-size: 13px; background: var(--hzk-sur); border: 1px dashed var(--hzk-bd); border-radius: 12px; } #page-humanz-pro.humanz-pro-v2 .calcline { font-size: 11.5px; color: var(--hzk-mut); } #page-humanz-pro.humanz-pro-v2 .tot { font-weight: 650; letter-spacing: -.02em; } /* La barra de herramientas de cada vista: los controles alineados y con aire. */ #page-humanz-pro.humanz-pro-v2 .hz-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 18px; } #page-humanz-pro.humanz-pro-v2 .hz-search { flex: 1; min-width: 200px; } @media (prefers-reduced-motion: reduce) { #page-humanz-pro.humanz-pro-v2 *, [id^="mo-hz-"] *, #mo-humanz-det *, #mo-humanz-rol * { transition: none !important; } }