/* ========================================================================== Módulo RR.HH. — sistema visual (basado en el mockup de diseño). Todo va scopeado bajo #vista.rh-scope para no afectar al resto del hub. Soporta modo claro y oscuro (body.dark). ========================================================================== */ :root, body { --rh-bg:#F4F1EA; --rh-surface:#FFFFFF; --rh-border:#E7E2D6; --rh-line:#EFEBE1; --rh-text:#1B1D1A; --rh-muted:#7C7A70; --rh-green:#3E9E58; --rh-green-d:#357F49; --rh-green-soft:#E4F0E5; --rh-green-line:#BCDCC2; --rh-green-text:#2C6B3F; --rh-blue:#2563C9; --rh-red:#C0392B; --rh-chip:#ECE8DE; --rh-chip-text:#57534A; --rh-c-finde:#ECE7DD; --rh-c-finde-tx:#8b8578; --rh-c-fest:#D2683F; --rh-c-vac:#5B8BC4; --rh-c-puente:#E4C066; --rh-c-puente-tx:#4a3d10; } body.dark { --rh-bg:#171d1a; --rh-surface:#212824; --rh-border:#323a35; --rh-line:#2b322d; --rh-text:#E7ECE9; --rh-muted:#9AA39C; --rh-green:#4CAF63; --rh-green-d:#5cbf73; --rh-green-soft:#22322a; --rh-green-line:#365741; --rh-green-text:#8FD6A1; --rh-blue:#77A6F0; --rh-red:#E88178; --rh-chip:#2E352F; --rh-chip-text:#B9C0BA; --rh-c-finde:#2A302C; --rh-c-finde-tx:#8f978f; --rh-c-fest:#B8562F; --rh-c-vac:#4A76AD; --rh-c-puente:#7d6524; --rh-c-puente-tx:#f0e4c0; } .rh-scope{ background:var(--rh-bg); color:var(--rh-text); border-radius:16px; padding:20px 22px 26px; margin-top:4px; } .rh-scope h2{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 4px; color:var(--rh-text); } .rh-scope h3{ color:var(--rh-text); } .rh-scope .note{ color:var(--rh-muted); } .rh-scope .rh-err{ color:var(--rh-red); min-height:1em; } /* --- Botones (scopeados) --- */ .rh-scope .btn{ background:var(--rh-green); color:#fff; border:none; border-radius:9px; padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .12s; } .rh-scope .btn:hover{ background:var(--rh-green-d); } .rh-scope .btn.ghost{ background:var(--rh-surface); color:var(--rh-text); border:1px solid var(--rh-border); } .rh-scope .btn.ghost:hover{ background:var(--rh-line); } .rh-scope .btn.mini{ padding:6px 12px; font-size:12px; } /* --- Login --- */ .rh-login{ max-width:340px; margin:48px auto; display:flex; flex-direction:column; gap:10px; background:var(--rh-surface); border:1px solid var(--rh-border); border-radius:16px; padding:26px; box-shadow:0 1px 3px rgba(0,0,0,.04); } .rh-login h2{ margin-bottom:6px; } .rh-login input{ padding:10px; border:1px solid var(--rh-border); border-radius:9px; background:var(--rh-surface); color:var(--rh-text); } /* --- Toolbar / listado empleados --- */ .rh-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:14px; } .rh-toolbar input{ flex:1; padding:10px 12px; border:1px solid var(--rh-border); border-radius:10px; background:var(--rh-surface); color:var(--rh-text); } /* --- Tablas --- */ .rh-tabla{ width:100%; border-collapse:collapse; background:var(--rh-surface); border:1px solid var(--rh-border); border-radius:14px; overflow:hidden; } .rh-tabla thead th{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--rh-muted); font-weight:700; padding:12px 14px; text-align:left; border-bottom:1px solid var(--rh-border); background:var(--rh-surface); } .rh-tabla td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--rh-line); color:var(--rh-text); } .rh-tabla tbody tr:last-child td{ border-bottom:none; } .rh-total td{ font-weight:700; border-top:2px solid var(--rh-border); background:var(--rh-line); } /* Costes salariales: cabecera de grupo y subtotal SALARIO BRUTO */ .cs-grp td{ font-weight:700; text-transform:uppercase; font-size:.82em; letter-spacing:.04em; background:var(--rh-line); color:var(--rh-muted); border-top:1px solid var(--rh-border); } .cs-bruto td{ font-weight:700; border-top:1px solid var(--rh-border); background:var(--rh-green-soft); } .rh-row{ cursor:pointer; } .rh-row:hover td{ background:var(--rh-green-soft); } /* Informes · Productividad: fila cabecera de departamento (subtotales) con sombreado sutil */ .rh-grp td{ background:var(--rh-line); font-weight:600; } .rh-grp:hover td{ background:var(--rh-border); } .rh-tabla th.rh-sort{ cursor:pointer; user-select:none; white-space:nowrap; } .rh-tabla th.rh-sort:hover{ color:var(--rh-text); } .rh-tabla th.rh-sort.on{ color:var(--rh-green-text); } .rh-sarr{ font-size:10px; } /* Turnos Realizado/Planificación: primera columna (Turno/Sección) fija al hacer scroll lateral. .rh-tabla tiene overflow:hidden (recorte de esquinas) que rompe position:sticky -> se pone visible solo para esta tabla; el fondo var(--rh-surface) coincide con el de las celdas para tapar el contenido. */ #ttTabla{ overflow:visible; } #ttTabla th:first-child, #ttTabla td:first-child{ position:sticky; left:0; z-index:1; background:var(--rh-surface); border-right:1px solid var(--rh-border); } #ttTabla thead th:first-child{ z-index:2; } /* --- Ficha --- */ .rh-ficha-head{ display:flex; gap:10px; align-items:center; margin-bottom:16px; } .rh-ficha{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px 18px; background:var(--rh-surface); border:1px solid var(--rh-border); border-radius:14px; padding:18px; } .rh-ficha .full{ grid-column:1/-1; } .rh-ficha label{ font-size:12px; color:var(--rh-muted); display:block; margin-bottom:3px; } .rh-ficha input, .rh-ficha select{ width:100%; padding:8px 10px; border:1px solid var(--rh-border); border-radius:9px; background:var(--rh-surface); color:var(--rh-text); } .rh-ficha input[readonly]{ background:var(--rh-line); color:var(--rh-muted); } /* Feedback del PIN (validación en vivo + resultado de guardado) */ .rh-pin-fb{ font-size:12px; margin-top:5px; color:var(--rh-muted); min-height:1em; line-height:1.3; } .rh-pin-fb.ok{ color:var(--rh-green-text); font-weight:700; } .rh-pin-fb.bad{ color:var(--rh-red); font-weight:700; } .rh-ficha input.pin-ok{ border-color:var(--rh-green-line); box-shadow:0 0 0 2px var(--rh-green-soft); } .rh-ficha input.pin-bad{ border-color:var(--rh-red); box-shadow:0 0 0 2px rgba(192,57,43,.14); } /* --- Documentos --- */ #rhDocs{ margin-top:22px; } .rh-doc-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:10px 0 16px; padding:16px; border:1px solid var(--rh-border); border-radius:14px; background:var(--rh-surface); } .rh-doc-fld{ display:flex; flex-direction:column; gap:4px; } .rh-doc-fld.grow{ flex:1; min-width:180px; } .rh-doc-form label{ font-size:12px; color:var(--rh-muted); } .rh-doc-form input, .rh-doc-form select, .rh-doc-filtro input, .rh-doc-filtro select{ padding:8px 10px; border:1px solid var(--rh-border); border-radius:9px; background:var(--rh-surface); color:var(--rh-text); } .rh-doc-filtro{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } /* Edición inline de documentos en el buscador */ .rh-scope .rh-db-inp{ width:100%; min-width:90px; padding:6px 8px; border:1px solid var(--rh-border); border-radius:8px; background:var(--rh-surface); color:var(--rh-text); font-size:13px; } .rh-scope tr.rh-db-editing td{ vertical-align:middle; } .rh-scope tr.rh-db-editing .btn.mini{ margin-right:6px; } /* --- Configuración: tarjetas de catálogos --- */ .rh-cfg-head{ margin-bottom:16px; } .rh-cfg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; } .rh-cfg-card{ border:1px solid var(--rh-border); border-radius:14px; padding:16px 18px; background:var(--rh-surface); box-shadow:0 1px 2px rgba(0,0,0,.03); } .rh-cfg-card h3{ margin:0 0 12px; font-size:16px; font-weight:800; } .rh-cfg-card h3 small{ color:var(--rh-muted); font-weight:600; } .rh-cfg-list{ list-style:none; padding:0; margin:0 0 12px; max-height:300px; overflow:auto; } .rh-cfg-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--rh-line); } .rh-cfg-item:last-child{ border-bottom:none; } .rh-cfg-item span[id^="rhCfgVal-"]{ flex:1; font-weight:500; } .rh-cfg-item.inactivo span[id^="rhCfgVal-"]{ color:var(--rh-muted); text-decoration:line-through; } .rh-cfg-empty{ color:var(--rh-muted); padding:8px 0; } /* código como chip editable */ .rh-cfg-cod{ width:52px; padding:3px 4px; border:1px solid var(--rh-border); border-radius:7px; text-align:center; font-size:12px; flex-shrink:0; background:var(--rh-chip); color:var(--rh-chip-text); } .rh-cfg-codro{ display:inline-block; min-width:38px; padding:2px 8px; background:var(--rh-chip); color:var(--rh-chip-text); border-radius:7px; text-align:center; font-size:12px; font-weight:600; flex-shrink:0; } /* acciones como enlaces de color */ .rh-cfg-acts{ display:flex; gap:12px; flex-shrink:0; } .rh-cfg-acts button, .rh-cfg-acts .btn{ background:none!important; border:none!important; padding:0!important; font-size:13px; font-weight:600; cursor:pointer; } .rh-cfg-acts button[id^="rhCfgEdit-"]{ color:var(--rh-blue); } .rh-cfg-acts button[id^="rhCfgTog-"]{ color:var(--rh-red); } .rh-cfg-acts button[data-activar]{ color:var(--rh-green); } .rh-cfg-editinput{ flex:1; padding:6px 8px; border:1px solid var(--rh-border); border-radius:8px; min-width:0; background:var(--rh-surface); color:var(--rh-text); } /* botón "+ Añadir valor" punteado verde */ .rh-cfg-add{ display:flex; gap:8px; } .rh-cfg-add input{ flex:1; padding:8px 10px; border:1px solid var(--rh-border); border-radius:9px; background:var(--rh-surface); color:var(--rh-text); } .rh-cfg-add .btn:not(.mini), .rh-cfg-addbtn{ flex:1; width:100%; background:var(--rh-green-soft)!important; color:var(--rh-green-text)!important; border:1.5px dashed var(--rh-green-line)!important; } /* Secciones y máquinas: tarjetas más anchas en grid, con columnas alineadas (Máquina | Tipo | Fichaje | Área | Acciones) y una fila de cabecera por tarjeta. */ /* Hasta 2 tarjetas por fila, pero cada una con ancho suficiente (>=720px) para que las 5 columnas + acciones quepan dentro sin desbordar; min(720px,100%) evita overflow en pantallas estrechas (se clampa al ancho disponible). */ #rhSecc .rh-cfg-grid{ grid-template-columns:repeat(auto-fill,minmax(min(720px,100%),1fr)); } #rhSecc .rh-cfg-list{ max-height:none; overflow:visible; } #rhSecc .rh-cfg-item, #rhSecc .rh-cfg-colhead{ display:grid; /* nombre flexible con min:0 (encoge, no fuerza desborde) + columnas fijas + acciones */ grid-template-columns: minmax(0,1fr) 120px 140px 160px minmax(110px,auto); align-items:center; gap:12px; } #rhSecc .rh-cfg-item{ padding:9px 0; } #rhSecc .rh-cfg-col-maq{ display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; } #rhSecc .rh-cfg-col-tipo, #rhSecc .rh-cfg-col-fich, #rhSecc .rh-cfg-col-area{ display:flex; align-items:center; min-width:0; } #rhSecc .rh-cfg-acts{ min-width:0; justify-content:flex-end; } #rhSecc .rh-cfg-colhead{ font-size:11px; color:var(--rh-muted); font-weight:600; text-transform:uppercase; letter-spacing:.02em; padding:0 0 6px; margin-bottom:4px; border-bottom:1px solid var(--rh-line); } #rhSecc .rhAreaSel{ width:100%; max-width:150px; padding:5px 6px; border:1px solid var(--rh-border); border-radius:8px; background:var(--rh-surface); color:var(--rh-text); font-size:12.5px; } #rhSecc .rh-area-txt{ color:var(--rh-muted); font-size:13px; } #rhSecc .rhTipoSel{ width:100%; max-width:150px; padding:5px 6px; border:1px solid var(--rh-border); border-radius:8px; background:var(--rh-surface); color:var(--rh-text); font-size:12.5px; } #rhSecc .rh-tipo-txt{ color:var(--rh-muted); font-size:13px; } /* Móvil: columnas fijas más estrechas y acciones a su propia fila. */ @media (max-width:760px){ #rhSecc .rh-cfg-item, #rhSecc .rh-cfg-colhead{ grid-template-columns: minmax(0,1fr) 88px 104px 118px; } #rhSecc .rh-cfg-acts{ grid-column:1 / -1; justify-content:flex-end; margin-top:6px; } #rhSecc .rh-cfg-colhead span:last-child{ display:none; } } /* --- Presencia (tabla editable) --- */ #rhPresTabla .rhPresInp{ padding:6px 8px; border:1px solid var(--rh-border); border-radius:8px; background:var(--rh-surface); color:var(--rh-text); } #rhPresTabla td{ vertical-align:middle; } #rhPresTabla tr.rh-pres-nueva td{ background:var(--rh-green-soft); } #rhPresTabla tr.inactivo td:not(:last-child){ opacity:.5; } /* --- Calendario: cabecera, años, resumen --- */ .rh-cal-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; } .rh-cal-years{ display:flex; gap:8px; flex-wrap:wrap; } .rh-cal-yr{ padding:7px 16px; border:1px solid var(--rh-border); border-radius:999px; background:var(--rh-surface); color:var(--rh-text); cursor:pointer; font-weight:700; } .rh-cal-yr.on{ background:var(--rh-green-soft); color:var(--rh-green-text); border-color:var(--rh-green-line); } .rh-cal-yr.add{ font-weight:500; color:var(--rh-muted); } .rh-cal-toggle{ display:inline-flex; border:1px solid var(--rh-border); border-radius:999px; overflow:hidden; margin:4px 0 14px; } .rh-cal-toggle button{ background:var(--rh-surface); color:var(--rh-text); border:none; padding:7px 16px; font-weight:600; cursor:pointer; } .rh-cal-toggle button.on{ background:var(--rh-green); color:#fff; } .rh-cal-resumen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:16px; } .rh-cal-kpi{ border:1px solid var(--rh-border); border-radius:12px; padding:12px 14px; background:var(--rh-surface); } .rh-cal-kpi .k{ font-size:12px; color:var(--rh-muted); } .rh-cal-kpi .v{ font-size:22px; font-weight:800; letter-spacing:-.01em; } .rh-cal-kpi.ajuste{ background:var(--rh-green-soft); border-color:var(--rh-green-line); } .rh-cal-conv{ display:flex; gap:10px; align-items:center; margin-bottom:14px; } .rh-cal-conv input{ width:110px; padding:8px 10px; border:1px solid var(--rh-border); border-radius:9px; background:var(--rh-surface); color:var(--rh-text); } /* tabla de configuración (se mantiene) */ .rh-cal-tabla .rhCalInp{ padding:6px 8px; border:1px solid var(--rh-border); border-radius:8px; background:var(--rh-surface); color:var(--rh-text); } .rh-cal-tabla tr.rh-cal-mes td{ background:var(--rh-green-soft); font-weight:800; color:var(--rh-green-text); } .rh-cal-tabla tr.rh-cal-festivo>td:first-child, .rh-cal-tabla tr.rh-cal-festivo_local>td:first-child{ color:var(--rh-red); font-weight:700; } .rh-cal-tabla tr.rh-cal-finde>td{ color:var(--rh-muted); } .rh-cal-tabla tr.rh-cal-vacaciones>td:first-child{ color:var(--rh-c-vac); font-weight:600; } .rh-cal-tabla tr.rh-cal-puente>td:first-child{ color:var(--rh-c-puente-tx); font-weight:600; } /* --- Calendario: rejilla mensual --- */ .rh-calm-nav{ display:flex; align-items:center; gap:14px; margin-bottom:10px; } .rh-calm-nav h3{ font-size:18px; font-weight:800; margin:0; min-width:200px; } .rh-calm-nav button{ background:var(--rh-surface); border:1px solid var(--rh-border); color:var(--rh-text); border-radius:9px; width:34px; height:34px; font-size:16px; cursor:pointer; } .rh-calm-leg{ display:flex; gap:16px; flex-wrap:wrap; margin-left:auto; align-items:center; font-size:13px; color:var(--rh-muted); } .rh-calm-legitem{ display:inline-flex; align-items:center; } .rh-calm-leg i{ width:14px; height:14px; border-radius:4px; display:inline-block; vertical-align:-2px; margin-right:5px; border:1px solid var(--rh-border); } .rh-calm-leg i.rh-legc-laborable{ background:var(--rh-surface); } .rh-calm-leg i.rh-legc-finde{ background:var(--rh-c-finde); } .rh-calm-leg i.rh-legc-festivo{ background:var(--rh-c-fest); } .rh-calm-leg i.rh-legc-vacaciones{ background:var(--rh-c-vac); } .rh-calm-leg i.rh-legc-puente{ background:var(--rh-c-puente); } .rh-calm-grid{ background:var(--rh-surface); border:1px solid var(--rh-border); border-radius:16px; padding:16px; } .rh-calm-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:8px; } .rh-calm-dow span{ text-align:center; font-weight:800; color:var(--rh-text); } .rh-calm-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; } .rh-calm-cell{ min-height:78px; border:1px solid var(--rh-border); border-radius:12px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; background:var(--rh-surface); } .rh-calm-cell.clic{ cursor:pointer; } .rh-calm-cell.clic:hover{ box-shadow:0 0 0 2px var(--rh-green-line) inset; } .rh-calm-cell .dnum{ font-weight:800; font-size:17px; } .rh-calm-cell .dtipo{ font-size:11.5px; opacity:.9; } .rh-calm-cell .dhoras{ font-size:12px; font-weight:700; margin-top:auto; } .rh-calm-cell.empty{ border:none; background:transparent; } /* colores por tipo */ .rh-calm-cell.finde{ background:var(--rh-c-finde); color:var(--rh-c-finde-tx); border-color:transparent; } .rh-calm-cell.festivo, .rh-calm-cell.festivo_local{ background:var(--rh-c-fest); color:#fff; border-color:transparent; } .rh-calm-cell.vacaciones{ background:var(--rh-c-vac); color:#fff; border-color:transparent; } .rh-calm-cell.puente{ background:var(--rh-c-puente); color:var(--rh-c-puente-tx); border-color:transparent; } /* --- Modal --- */ .rh-modal-ov{ position:fixed; inset:0; background:rgba(20,25,22,.45); display:flex; align-items:center; justify-content:center; z-index:1000; } .rh-modal{ background:var(--rh-surface); color:var(--rh-text); border-radius:16px; padding:24px; width:min(420px,92vw); box-shadow:0 12px 40px rgba(0,0,0,.25); } .rh-modal h3{ margin:0 0 16px; font-size:18px; font-weight:800; } .rh-modal label{ display:block; font-size:13px; color:var(--rh-muted); margin:12px 0 4px; } .rh-modal input, .rh-modal select{ width:100%; padding:10px 12px; border:1px solid var(--rh-border); border-radius:9px; background:var(--rh-surface); color:var(--rh-text); } /* Las casillas de selección (listas dentro de modales) no deben heredar el input full-width. */ .rh-modal input[type=checkbox]{ width:auto; min-width:0; padding:0; border:0; border-radius:0; box-shadow:none; margin:0; vertical-align:middle; } .rh-modal-acc{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; } .rh-modal .rh-err{ margin-top:10px; } /* --- Control de presencia: alta manual + diario --- */ .rh-scope .rh-card{ background:var(--rh-surface); border:1px solid var(--rh-border); border-radius:14px; padding:18px; } .rh-filtros{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px; } .rh-form-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 18px; } .rh-form-grid3 .full{ grid-column:1/-1; } .rh-fld{ display:flex; flex-direction:column; } .rh-fld .rh-seg{ display:flex; } .rh-fld label{ font-size:12px; color:var(--rh-muted); margin-bottom:4px; } /* Marcador de campo obligatorio (p.ej. Empresa en la ficha). */ .rh-req{ color:var(--rh-red, #d9534f); font-weight:700; margin-left:2px; } .rh-fld input, .rh-fld select{ padding:9px 11px; border:1px solid var(--rh-border); border-radius:9px; background:var(--rh-surface); color:var(--rh-text); } .rh-seg{ display:inline-flex; border:1px solid var(--rh-border); border-radius:9px; overflow:hidden; background:var(--rh-surface); } .rh-seg button{ flex:1; border:none; background:transparent; color:var(--rh-text); padding:9px 14px; font-weight:700; font-size:13px; cursor:pointer; transition:background .12s; } .rh-seg button + button{ border-left:1px solid var(--rh-border); } .rh-seg button.on{ background:var(--rh-green); color:#fff; } .rh-scope .rh-msg{ font-size:13px; color:var(--rh-muted); } .rh-scope .rh-msg.ok{ color:var(--rh-green-text); font-weight:600; } .rh-scope .rh-msg.err{ color:var(--rh-red); font-weight:600; } .rh-badge{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; } .rh-badge.rh-in{ background:var(--rh-green-soft); color:var(--rh-green-text); } .rh-badge.rh-out{ background:var(--rh-chip); color:var(--rh-chip-text); } .rh-badge.rh-no{ background:rgba(192,57,43,.14); color:var(--rh-red); } /* --- Solicitudes: chips de estado --- */ .rh-estado{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; } .rh-estado.est-p1, .rh-estado.est-p2{ background:rgba(228,192,102,.22); color:#8a6d16; } .rh-estado.est-ap{ background:rgba(37,99,201,.14); color:var(--rh-blue); } .rh-estado.est-as{ background:var(--rh-green-soft); color:var(--rh-green-text); } .rh-estado.est-re{ background:rgba(192,57,43,.14); color:var(--rh-red); } .rh-estado.est-an{ background:var(--rh-chip); color:var(--rh-chip-text); } body.dark .rh-estado.est-p1, body.dark .rh-estado.est-p2{ color:#e4c066; } /* detalle de solicitud */ .rh-det{ display:flex; flex-direction:column; gap:6px; margin:6px 0 12px; } .rh-det-row{ display:flex; justify-content:space-between; gap:14px; border-bottom:1px solid var(--rh-line); padding-bottom:5px; } .rh-det-row span{ color:var(--rh-muted); font-size:13px; } .rh-lnk{ color:var(--rh-blue); cursor:pointer; } .rh-scope .rh-chip{ display:inline-block; padding:1px 7px; border-radius:6px; font-size:10px; font-weight:700; background:var(--rh-chip); color:var(--rh-chip-text); vertical-align:middle; } .rh-tabla tr.rh-auto td{ color:var(--rh-muted); font-style:italic; } .rh-scope .rh-lnk{ cursor:pointer; color:var(--rh-green-text); font-weight:700; } .rh-scope .rh-lnk:hover{ text-decoration:underline; } .rh-scope .rh-tipo{ display:inline-block; padding:1px 8px; border-radius:7px; font-size:11px; font-weight:700; margin-left:6px; } .rh-scope .rh-tipo.prod{ background:rgba(37,99,201,.14); color:var(--rh-blue); } .rh-scope .rh-tipo.noprod{ background:var(--rh-chip); color:var(--rh-chip-text); } .rh-scope .rh-tipo.nofich{ background:rgba(192,57,43,.14); color:var(--rh-red); } /* Resumen de presencia/jornada: tarjetas de estadística */ .rh-stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin:14px 0 18px; } .rh-stat{ background:var(--rh-surface); border:1px solid var(--rh-border); border-radius:12px; padding:12px 14px; } .rh-stat .lbl{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--rh-muted); font-weight:700; margin-bottom:4px; } .rh-stat .val{ font-size:20px; font-weight:800; color:var(--rh-text); } .rh-stat.dif .val{ color:var(--rh-blue); } .rh-stat.vac .val{ color:var(--rh-green-text); } .rh-stat.aus .val{ color:var(--rh-red); } /* --- Campana de notificaciones --- */ .rh-bell{ position:relative; display:inline-block; } .rh-bell button{ background:var(--rh-surface); border:1px solid var(--rh-border); border-radius:10px; padding:7px 10px; cursor:pointer; font-size:15px; position:relative; } .rh-bell-cnt{ position:absolute; top:-6px; right:-6px; background:var(--rh-red); color:#fff; border-radius:10px; font-size:10px; font-weight:700; padding:1px 5px; } .rh-bell-pop{ position:absolute; right:0; top:calc(100% + 6px); width:320px; max-height:380px; overflow:auto; background:var(--rh-surface); border:1px solid var(--rh-border); border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.14); z-index:50; } .rh-bell-head{ font-weight:800; padding:10px 12px; border-bottom:1px solid var(--rh-line); } .rh-noti{ padding:9px 12px; border-bottom:1px solid var(--rh-line); } .rh-noti.unread{ background:var(--rh-green-soft); cursor:pointer; } .rh-noti-msg{ font-size:13px; } .rh-noti-meta{ font-size:11px; color:var(--rh-muted); margin-top:2px; } /* Campana de avisos del topbar (agregación de pendientes) */ .rh-av-wrap{ position:relative; display:inline-flex; } .rh-av-cnt{ pointer-events:none; } .rh-av-grp{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 12px 4px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--rh-muted); } .rh-av-grp .rh-av-all{ text-transform:none; font-weight:700; color:var(--rh-blue); text-decoration:none; } .rh-bell-pop .rh-noti[data-go]{ cursor:pointer; } .rh-jc-code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; letter-spacing:.5px; background:var(--rh-line); padding:2px 8px; border-radius:6px; user-select:all; } /* Barra estándar de exportación (Excel / PDF): siempre alineada a la derecha, encima de la tabla */ .rh-exp-bar{ display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; } /* Config de importes mensuales (Plus Tóxico/Nocturnidad, Complemento) */ .rh-imp-inp{ width:92px; padding:6px 8px; text-align:right; border:1px solid var(--rh-border); border-radius:8px; background:var(--rh-surface); color:var(--rh-text); font:inherit; } .rh-imp-inp.rh-imp-narrow{ width:60px; padding:5px 6px; } /* Plus Tóxico/Nocturnidad: importes de ~3 dígitos */ /* Tabla de plus con columnas estrechas: el ancho lo fija el contenido (width:auto en la tabla) + padding reducido */ .rh-imp-tight th, .rh-imp-tight td{ padding:6px 8px; white-space:nowrap; } .rh-imp-inp:focus{ outline:none; border-color:var(--rh-green); } .rh-imp-lock{ background:var(--rh-line); color:var(--rh-muted); } @keyframes rhImpOk{ from{ background:var(--rh-green-soft); } to{ background:transparent; } } @keyframes rhImpErr{ from{ background:rgba(192,57,43,.22); } to{ background:transparent; } } .rh-imp-inp.rh-imp-ok{ animation:rhImpOk 1s ease-out; } .rh-imp-inp.rh-imp-err{ animation:rhImpErr 1s ease-out; } @media (max-width:1040px){ .rh-form-grid3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ .rh-ficha{ grid-template-columns:minmax(0,1fr); } .rh-form-grid3{ grid-template-columns:1fr; } .rh-calm-cell{ min-height:64px; padding:6px; } .rh-calm-cell .dnum{ font-size:14px; } } /* --- Ficha en pestañas --- */ .rh-ficha-head{ align-items:flex-start; justify-content:space-between; } .rh-ficha-title h2{ margin:0; font-size:22px; font-weight:800; color:var(--rh-text); } .rh-ficha-sub{ margin-top:2px; font-size:13px; color:var(--rh-muted); } .rh-ficha-acc{ display:flex; gap:10px; align-items:center; flex-shrink:0; } .rh-ftabs{ display:flex; gap:4px; margin:16px 0 14px; border-bottom:1px solid var(--rh-border); overflow-x:auto; } .rh-ftab{ appearance:none; background:transparent; border:none; border-bottom:2px solid transparent; padding:9px 14px; font-size:14px; font-weight:600; color:var(--rh-muted); cursor:pointer; white-space:nowrap; } .rh-ftab:hover{ color:var(--rh-text); } .rh-ftab.active{ color:var(--rh-green-text); border-bottom-color:var(--rh-green-line); } /* --- Combo con buscador (RhCombo): input de texto que filtra un