/* css/common.css */ /* ═══════════════════════════════════════════════════════ TOKENS — MODO CLARO (por defecto) ═══════════════════════════════════════════════════════ */ :root { --bg: #f4f1ea; --surface: #ffffff; --ink: #1c1a17; --ink-soft: #6b6359; --line: #ddd6c9; --accent: #8c858b; --accent-deep: #5f5963; --ok: #3a6b52; --warn: #a8462f; --radius: 4px; /* Feature 9c/10: alturas reales del appbar y de la resumen-bar ya fijada (resumen-bar-cargado), medidas por JS (ResizeObserver) y escritas aquí como variables para que el thead de #tablaReporte pueda "acoplarse" exactamente debajo, sin importar cuánto midan en la práctica (nombre de usuario largo, wrap de la resumen-bar, etc.). Los valores de respaldo son solo una aproximación para el primer pintado, antes de que JS alcance a medir. */ --appbar-h: 92px; --resumen-h: 58px; } /* ═══════════════════════════════════════════════════════ TOKENS — MODO OSCURO Se activa con la clase .dark en ═══════════════════════════════════════════════════════ */ html.dark { --bg: #18171a; --surface: #24222a; --ink: #edeae4; --ink-soft: #9b9299; --line: #38353f; --accent: #7d7682; --accent-deep: #a79eb0; --ok: #5aab7e; --warn: #e06b50; } /* ═══════════════════════════════════════════════════════ RESET / BASE ═══════════════════════════════════════════════════════ */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; } h1, h2, h3 { font-family: 'Georgia', 'Times New Roman', serif; font-weight: 600; margin: 0; } label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; margin-top: 18px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; background: var(--bg); color: var(--ink); font-family: inherit; transition: background 0.2s, color 0.2s, border-color 0.2s; } input:disabled { color: var(--ink-soft); cursor: not-allowed; } input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; } button { cursor: pointer; font-family: inherit; } .btn-primary { width: 100%; margin-top: 26px; padding: 12px; background: var(--accent-deep); color: #fff; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 600; transition: background 0.15s; } .btn-primary:hover { background: var(--ink); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* ═══════════════════════════════════════════════════════ REDIRECCIÓN (index.html) ═══════════════════════════════════════════════════════ */ .redirect-msg { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 14px; } /* ═══════════════════════════════════════════════════════ APP SHELL ═══════════════════════════════════════════════════════ */ #pantallaApp { min-height: 100vh; } header.appbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; position: sticky; top: 0; z-index: 10; } header.appbar .titulo .eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } header.appbar h1 { font-size: 19px; margin: 0; } /* Fila que agrupa el H1 y el nombre del colega + mes/año (feature 2b), para que ambos queden en la misma línea en vez de uno bajo el otro. */ .titulo-fila { display: flex; align-items: baseline; flex-wrap: nowrap; column-gap: 10px; row-gap: 0; min-width: 0; } header.appbar h1 { flex-shrink: 0; } /* Feature 2b: nombre del colega + mes/año, junto al título. Si el nombre no cabe en el ancho disponible, el texto se desplaza como una marquesina en vez de recortarse u ocultarse. Estilo de letra casi idéntico al H1 (mismo tamaño/peso), solo un poco más tenue en color para distinguirlo como información secundaria. */ .titulo-colega-mes { max-width: 260px; overflow: hidden; white-space: nowrap; font-size: 18px; font-weight: 600; color: var(--ink-soft); display: none; flex: 0 1 auto; min-width: 0; } .titulo-colega-mes.visible { display: block; } .titulo-colega-mes .marquesina-track { display: inline-flex; white-space: nowrap; } .titulo-colega-mes .marquesina-texto { padding-right: 32px; } .titulo-colega-mes.marquesina-activa .marquesina-track { animation: marquesina-desplazar 10s linear infinite; } @keyframes marquesina-desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Respeta la preferencia del sistema de reducir animaciones: se muestra el texto recortado en vez de moverlo indefinidamente. */ @media (prefers-reduced-motion: reduce) { .titulo-colega-mes.marquesina-activa .marquesina-track { animation: none; } .titulo-colega-mes.marquesina-activa .marquesina-texto:nth-child(n+2) { display: none; } } /* Icono compuesto (icono base + icono badge), p. ej. el de "Informe de incidencias" (📋 + 🚨) en el nav. */ .icon-incidencias { position: relative; display: none; width: 22px; height: 16px; flex-shrink: 0; } .icon-base { position: absolute; left: 0; top: -1px; font-size: 16px; line-height: 1; } .icon-badge { position: absolute; right: -2px; bottom: -1px; font-size: 12px; line-height: 1; pointer-events: none; } .nav-principal { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .nav-principal a { font-size: 13px; color: var(--ink-soft); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; } .nav-principal a:hover { color: var(--ink); } .nav-principal a.active { color: var(--ink); border-bottom-color: var(--accent-deep); font-weight: 600; } .usuario-bar { display: flex; align-items: center; gap: 12px; } .appbar-secciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .nombre-usuario { font-size: 13px; color: var(--ink-soft); } .nav-principal a { display: flex; align-items: center; gap: 6px; } .nav-icono { display: none; font-size: 16px; line-height: 1; } /* ─── Menú "Admin" del nav (agrupa Colegas + Catálogos) ─────────────────── */ .nav-admin { position: relative; display: flex; align-items: center; } .nav-admin-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 0; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; } .nav-admin-toggle:hover { color: var(--ink); } .nav-admin-toggle.active { color: var(--ink); border-bottom-color: var(--accent-deep); font-weight: 600; } .nav-admin-toggle .usuario-menu-caret { font-size: 9px; } .nav-admin-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); padding: 6px; z-index: 30; } .nav-admin.abierto .nav-admin-dropdown { display: flex; flex-direction: column; gap: 2px; } .nav-admin-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius); padding: 9px 10px; font-size: 13px; color: var(--ink); text-decoration: none; cursor: pointer; } .nav-admin-item:hover { background: var(--bg); } .nav-admin-item.active { font-weight: 600; color: var(--accent-deep); } .btn-salir { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; color: var(--ink-soft); } .btn-salir:hover { border-color: var(--accent-deep); color: var(--accent-deep); } /* ─── Menú de usuario (agrupa Configuración + Cerrar sesión) ───────────── */ .usuario-menu { position: relative; } .btn-usuario-menu { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 12px; font-size: 13px; color: var(--ink); } .btn-usuario-menu:hover { border-color: var(--accent-deep); } .usuario-menu-caret { font-size: 10px; color: var(--ink-soft); } .usuario-menu-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); padding: 6px; z-index: 30; } .usuario-menu.abierto .usuario-menu-dropdown { display: flex; flex-direction: column; gap: 2px; } .usuario-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius); padding: 9px 10px; font-size: 13px; color: var(--ink); text-decoration: none; cursor: pointer; } .usuario-menu-item:hover { background: var(--bg); } .usuario-menu-item.active { font-weight: 600; color: var(--accent-deep); } .usuario-menu-item-salir { color: var(--warn); } /* ─── Botón tema ──────────────────────────────────── */ .btn-tema { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 10px; font-size: 15px; color: var(--ink-soft); line-height: 1; transition: border-color 0.15s, color 0.15s; } .btn-tema:hover { border-color: var(--accent-deep); color: var(--accent-deep); } /* ─── Botón imprimir ──────────────────────────────── */ .btn-imprimir { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; } .btn-imprimir:hover { border-color: var(--accent-deep); color: var(--accent-deep); } /* ─── Menú "Actualizar" (crea Jobs de sincronización para Android) ──────── */ .menu-acciones { position: relative; } .btn-actualizar { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; font-size: 13px; color: var(--ink-soft); } .btn-actualizar:hover { border-color: var(--accent-deep); color: var(--accent-deep); } .btn-actualizar:disabled { opacity: 0.5; cursor: not-allowed; } .btn-actualizar .usuario-menu-caret { font-size: 10px; color: var(--ink-soft); } .menu-acciones-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); padding: 6px; z-index: 30; } .menu-acciones.abierto .menu-acciones-dropdown { display: flex; flex-direction: column; gap: 2px; } .menu-acciones-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius); padding: 9px 10px; font-size: 13px; color: var(--ink); text-decoration: none; cursor: pointer; } .menu-acciones-item:hover { background: var(--bg); } .menu-acciones-item:disabled { opacity: 0.5; cursor: not-allowed; color: var(--ink-soft); } /* ─── Toast (mensajes flotantes breves) ──────────────────────────────────── */ .toast-contenedor { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 100; pointer-events: none; } .toast { background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--radius); font-size: 13px; max-width: 90vw; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .toast.visible { opacity: 1; transform: translateY(0); } .toast.toast-error { background: var(--warn); color: #fff; } .toast.toast-ok { background: var(--ok); color: #fff; } /* ─── Badge de estado de Job (trabajos.html) ─────────────────────────────── */ .estado-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .estado-pendiente { background: rgba(140, 133, 139, 0.18); color: var(--ink-soft); } .estado-reclamado { background: rgba(95, 89, 99, 0.2); color: var(--accent-deep); } .estado-esperando { background: rgba(168, 70, 47, 0.14); color: var(--warn); } .estado-ejecutando { background: rgba(58, 107, 82, 0.16); color: var(--ok); } .estado-completado { background: rgba(58, 107, 82, 0.24); color: var(--ok); } .estado-fallido { background: rgba(168, 70, 47, 0.22); color: var(--warn); } .estado-cancelado { background: rgba(107, 99, 89, 0.18); color: var(--ink-soft); } .trabajos-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .trabajos-toolbar p { font-size: 13px; color: var(--ink-soft); margin: 0; } .job-resultado-msg { font-size: 12px; color: var(--ink-soft); margin-top: 2px; } .job-error-msg { font-size: 12px; color: var(--warn); margin-top: 2px; } main { max-width: 1100px; margin: 0 auto; padding: 24px; } /* ═══════════════════════════════════════════════════════ FILTROS ═══════════════════════════════════════════════════════ */ .filtros { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 20px; } .filtro-campo { flex: 1; min-width: 160px; } .filtro-campo label { margin-top: 0; } .filtro-corte { min-width: 220px; flex: 0 0 auto; } .filtro-corte input[type="text"] { width: 100%; cursor: pointer; background: var(--surface); } .filtro-guardar-corte { flex: 0 0 auto; display: flex; flex-direction: column; } .filtro-checkbox { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; } .checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; padding: 10px 0; cursor: pointer; } .checkbox-inline input { cursor: pointer; } .sincronizacion-info { font-size: 11px; color: var(--ink-soft); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 14px; } .sincronizacion-info strong { color: var(--ink); font-weight: 600; } /* Feature 3c: la sincronización-info de arriba del reporte semanal solo se revela una vez que ya se cargaron los datos del colega elegido (la de abajo de la tabla se comporta como antes). */ #sincronizacionInfo { display: none; margin-top: 0; margin-bottom: 12px; } #sincronizacionInfo.visible { display: flex; } .btn-guardar-corte { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; } .btn-guardar-corte:hover { border-color: var(--accent-deep); color: var(--accent-deep); } .corte-guardado-msg { font-size: 11px; color: var(--ink-soft); margin-top: 4px; } .corte-guardado-msg.ok { color: var(--ok); } /* ═══════════════════════════════════════════════════════ LEYENDA DEL REPORTE ═══════════════════════════════════════════════════════ */ .leyenda-reporte { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--ink-soft); } .leyenda-item { display: flex; align-items: center; gap: 6px; } .leyenda-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .swatch-feriado { background: rgba(76, 175, 80, 0.5); } .swatch-domingo { background: #c62828; } .swatch-ausencia { background: rgba(74, 144, 178, 0.5); } .swatch-recreada { background: transparent; border: 2px solid #42a5f5; } .swatch-atraso { background: rgba(251, 192, 45, 0.6); } .swatch-atraso-fuerte { background: rgba(255, 111, 0, 0.7); } .swatch-cambio-turno { background: rgba(216, 27, 96, 0.35); } /* ═══════════════════════════════════════════════════════ PÁGINAS DE ADMINISTRACIÓN (catálogos / formularios en tabla) ═══════════════════════════════════════════════════════ */ .admin-seccion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 24px; } .admin-seccion h2 { font-size: 16px; margin-bottom: 4px; } .admin-seccion .admin-descripcion { font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; } .admin-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .admin-form .filtro-campo { min-width: 140px; flex: 1; } .admin-form .btn-primary { width: auto; margin-top: 0; padding: 10px 18px; } .admin-tabla-acciones { display: flex; gap: 8px; } .btn-icono { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 9px; font-size: 13px; color: var(--ink-soft); } .btn-icono:hover { border-color: var(--warn); color: var(--warn); } /* ═══════════════════════════════════════════════════════ RESUMEN ═══════════════════════════════════════════════════════ */ .resumen-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .resumen-seccion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 18px; } .resumen-seccion.resumen-corte { border-left: 3px solid var(--accent-deep); } .resumen-titulo { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; font-weight: 600; } .resumen-items { display: flex; gap: 16px; flex-wrap: wrap; } .resumen-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; flex: 1; min-width: 140px; } .resumen-item .num { font-size: 26px; font-family: Georgia, serif; font-weight: 600; } .resumen-item .label { font-size: 12px; color: var(--ink-soft); margin-top: 2px; } .resumen-seccion .resumen-item { border: none; border-right: 1px solid var(--line); border-radius: 0; padding: 0 18px 0 0; flex: none; min-width: auto; } .resumen-seccion .resumen-item:last-child { border-right: none; padding-right: 0; } /* ═══════════════════════════════════════════════════════ TABLA ═══════════════════════════════════════════════════════ */ /* Capa con las columnas de la tabla, usada SOLO en la vista responsive del reporte semanal (<=768px, ver media query más abajo) en reemplazo del real. Oculta por defecto en escritorio e impresión. */ .tabla-header-capa { display: none; } .tabla-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; /* Nota: fijar overflow-x en un valor distinto de "visible" hace que overflow-y pase a "auto" también (regla de la especificación CSS), por lo que .tabla-wrap se convierte en su propio contenedor de scroll. Antes se intentaba mantener el pegado (sticky) arriba de la tabla DENTRO de este contenedor, y ese contexto de scroll propio rompía el cálculo de su posición contra la página. La cabecera fija en la vista responsive ya no vive aquí (ver #tablaHeaderCapa, fuera de .tabla-wrap, en reporte-semanal.html y más abajo en este archivo), así que este contenedor solo necesita scroll horizontal para las tablas anchas. */ } table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 680px; } thead th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); } tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--bg); } .dia-libre { color: var(--ink-soft); font-style: italic; } .num-cell { text-align: right; font-variant-numeric: tabular-nums; } td.horario { color: var(--ink-soft); font-size: 13px; } tr.fila-atraso td:first-child { font-weight: 600; } td.atraso { color: var(--warn); font-weight: 600; } /* ─── Domingos ───────────────────────────────────────────────────────── */ /* Resalta la fila completa en rojo intenso con letras blancas. Sin !important a propósito: así el feriado (que sí lleva !important) y el resaltado de columna causante de un atraso/error (celda-roja, también !important) siguen ganando cuando coinciden con un domingo. */ tr.fila-domingo td { background: #c62828; color: #ffffff; } tr.fila-domingo td.atraso { color: #ffffff; } .dia-domingo-label { color: var(--warn); font-weight: 700; } /* ─── Días fuera del mes (grilla tipo calendario) ───────────────────────── */ tr.dia-fuera-mes td { opacity: 0.55; font-style: italic; } /* ─── Filas clickeables → detalle de marcas ─────────────────────────────── */ tr.fila-dia { cursor: pointer; } tr.fila-dia:hover td { background: var(--bg); } tr.fila-dia-abierta td { border-bottom: none; } /* ─── Inconsistencias por día (prioridad: ausencia > cambio_turno > atraso_fuerte > atraso) ─ */ tr.fila-ausencia td { background: rgba(74, 144, 178, 0.16); } tr.fila-cambio-turno td { background: rgba(216, 27, 96, 0.12); } tr.fila-atraso-fuerte td { background: rgba(255, 111, 0, 0.28); } tr.fila-atraso td { background: rgba(251, 192, 45, 0.20); } /* ─── Feriados (se puede combinar con cualquier fila anterior) ──────────── */ /* !important para que gane siempre sobre cualquier otro fondo de fila (ausencia/atraso/etc.) y para que cubra TODAS las celdas de la fila, sin excepción, incluidas las últimas columnas (Horas extra, Atraso). */ tr.fila-feriado td { background: rgba(76, 175, 80, 0.18) !important; } /* ─── Filas reconstruidas desde marcas crudas (feature 4) ───────────────── */ /* El turno asignado quedó en blanco a propósito: se avisa con un borde grueso amarillo claro alrededor de toda la fila. */ tr.fila-recreada td:first-child { border-left: 4px solid #42a5f5; } tr.fila-recreada td:last-child { border-right: 4px solid #42a5f5; } tr.fila-recreada td { border-top: 2px solid #42a5f5; border-bottom: 2px solid #42a5f5; } .marca-recreada { cursor: help; color: #1e88e5; font-style: normal; font-weight: 700; } /* ─── Advertencia de marca (entrada)/(salida) ───────────────────────────── */ /* En pantallas normales se ve el texto "(entrada)"/"(salida)"; el icono pequeño queda oculto. En vista responsiva (ver media query 768px) se invierte: el texto se oculta y aparece el icono, para no romper el ancho de la columna en pantallas angostas. */ .marca-advertencia-icono { display: none; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 3px; border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; color: #fff; cursor: help; vertical-align: middle; } .icono-marca-entrada { background: #2e7d32; } .icono-marca-salida { background: #c62828; } /* En la leyenda el icono siempre debe verse (no solo en mobile), ya que ahí no acompaña a un texto "(entrada)"/"(salida)" alternativo. */ .leyenda-icono-marca { display: inline-flex !important; } /* ─── Cabecera de tabla: "Horas asist./ordin./extra" en vista responsiva ─ */ /* En pantallas normales se ve "Horas"; en mobile (media query 768px) se reemplaza por "H." para que la cabecera no fuerce demasiado ancho. */ .th-horas-corta { display: none; } /* ─── Badge con el número de marcas crudas del día ───────────────────── */ .badge-marcas { display: inline-block; min-width: 16px; padding: 1px 5px; margin-left: 4px; border-radius: 999px; background: var(--accent-deep); color: #fff; font-size: 10px; font-weight: 700; text-align: center; line-height: 1.5; vertical-align: middle; } /* ─── Fila expandible de detalle de marcas ──────────────────────────────── */ tr.fila-marcas-detalle td { background: var(--bg); white-space: normal; padding: 14px 18px; cursor: default; } .marcas-detalle-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .marca-item { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; font-size: 13px; } .marca-hora { font-weight: 600; font-variant-numeric: tabular-nums; } .marca-tipo { color: var(--ink-soft); } .marca-origen { color: var(--ink-soft); font-size: 11px; } .marcas-detalle-vacio, .marcas-detalle-cargando { color: var(--ink-soft); font-style: italic; } /* ═══════════════════════════════════════════════════════ ESTADO / ERRORES ═══════════════════════════════════════════════════════ */ .estado-msg { padding: 40px; text-align: center; color: var(--ink-soft); } .estado-msg.error { color: var(--warn); } .login-error { margin-top: 14px; color: var(--warn); font-size: 13px; } .config-ok { margin-top: 14px; color: var(--ok); font-size: 13px; } /* ═══════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 640px) { main { padding: 16px; } .filtros { padding: 14px; } header.appbar { padding: 14px 16px; } .resumen-items { gap: 12px; } .resumen-seccion .resumen-item { padding-right: 12px; } } /* ═══════════════════════════════════════════════════════ RESPONSIVE — FEATURE 3 (mobile: appbar de 2 filas, menú de usuario, resumen compacto y fijo, columna Día fija) ═══════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Advertencia de marca (entrada)/(salida): en mobile se oculta el texto entre paréntesis y se muestra el icono pequeño en su lugar. */ .marca-advertencia-texto { display: none; } .marca-advertencia-icono { display: inline-flex; } /* Cabecera de tabla: "Horas asist./ordin./extra" -> "H. asist./ordin./extra" */ .th-horas-full { display: none; } .th-horas-corta { display: inline; } /* 3a: fila 1 = título, fila 2 = secciones (nav icónico + menú usuario) */ header.appbar { flex-direction: column; align-items: stretch; row-gap: 10px; } header.appbar .titulo { width: 100%; text-align: center; } header.appbar .titulo h1 { font-size: 16px; } .titulo-fila { justify-content: center; } .titulo-colega-mes { font-size: 15px; max-width: 200px; } .appbar-secciones { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 6px; } .nav-principal { gap: 4px; flex: 1 1 auto; } .nav-principal a { padding: 8px; border-radius: var(--radius); border-bottom: none; } .nav-principal a.active { background: var(--bg); border-bottom: none; } .nav-icono { display: inline-block; } .nav-texto { display: none; } .icon-incidencias { display: inline-block; } .nav-admin-toggle { padding: 8px; border-radius: var(--radius); border-bottom: none; } .nav-admin-toggle.active { background: var(--bg); border-bottom: none; } .nav-admin-toggle .usuario-menu-caret { display: none; } .nav-admin-dropdown { left: -6px; } .usuario-bar { flex: 0 0 auto; gap: 6px; } .btn-usuario-menu .nombre-usuario { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 3b: una vez cargados los datos del colega, el resumen se encoge y se fija bajo el appbar (que también mide menos alto en 2 filas). */ .resumen-bar.resumen-bar-cargado { position: sticky; top: var(--appbar-h); /* alto real del appbar de 2 filas, medido por JS */ z-index: 9; background: var(--bg); padding: 6px 0 4px; margin-bottom: 10px; gap: 6px; } .resumen-bar.resumen-bar-cargado .resumen-titulo { display: none; } .resumen-bar.resumen-bar-cargado .resumen-seccion { padding: 8px 12px; overflow-x: auto; } .resumen-bar.resumen-bar-cargado .resumen-items { flex-wrap: nowrap; gap: 10px; } .resumen-bar.resumen-bar-cargado .resumen-item { padding-right: 10px; min-width: auto; } .resumen-bar.resumen-bar-cargado .resumen-item .num { font-size: 17px; } .resumen-bar.resumen-bar-cargado .resumen-item .label { font-size: 10px; white-space: nowrap; } /* 3d: columna "Día" fija a la izquierda al hacer scroll horizontal; se desacopla sola al volver al inicio del scroll (comportamiento nativo de position: sticky). Se limita a #tablaReporte (la única tabla larga y desplazable de la app) — las tablas pequeñas del informe de incidencias no deben fijar columnas ni cabecera, ya que eso las descoordinaba visualmente (cabecera tapada por las filas) sin aportar nada, al ser tablas cortas. */ #tablaReporte th:first-child, #tablaReporte td:first-child { position: sticky; left: 0; z-index: 3; background: var(--surface); box-shadow: 2px 0 5px rgba(0, 0, 0, 0.12); } /* La columna "Día" fija arriba pisa el fondo de cualquier resaltado de fila (domingo, ausencia, cambio de turno, atraso, feriado) porque su selector por ID pesa más que la clase de la fila. Se repite aquí el mismo color por clase, ya combinado con :first-child, para que la primera celda quede igual de coloreada que el resto de la fila. */ #tablaReporte tr.fila-domingo td:first-child { background: #c62828; color: #ffffff; } #tablaReporte tr.fila-ausencia td:first-child { background: rgba(74, 144, 178, 0.16); } #tablaReporte tr.fila-cambio-turno td:first-child { background: rgba(216, 27, 96, 0.12); } #tablaReporte tr.fila-atraso-fuerte td:first-child { background: rgba(255, 111, 0, 0.28); } #tablaReporte tr.fila-atraso td:first-child { background: rgba(251, 192, 45, 0.20); } #tablaReporte tr.fila-feriado td:first-child { background: rgba(76, 175, 80, 0.18) !important; } /* 9a: en vistas responsivas el botón de imprimir muestra solo el icono */ .btn-imprimir-texto { display: none; } .btn-imprimir { padding: 8px 10px; } /* Igual criterio para el botón "Actualizar": solo icono + flecha en mobile, el menú desplegable conserva siempre el texto completo. */ .btn-actualizar-texto { display: none; } .btn-actualizar { padding: 8px 10px; } .menu-acciones-dropdown { right: -6px; } /* 9b: la leyenda-reporte de arriba solo se muestra una vez que ya se cargaron los datos del colega elegido, igual que sincronizacion-info de arriba (y siempre por encima de esta, según el orden del DOM). */ #leyendaArriba { display: none; } #leyendaArriba.visible { display: flex; } /* 9c: el real de #tablaReporte se oculta en esta vista: la cabecera visible pasa a ser la capa independiente #tablaHeaderCapa (ver más abajo), que sí logra quedar fija de forma confiable porque vive fuera del contenedor con scroll de la tabla. */ #tablaReporte thead { display: none; } /* Feature responsive: capa con las columnas de la tabla, acoplada (solapada) justo debajo de la resumen-bar ya encogida y fijada (resumen-bar-cargado). El offset se arma con las alturas reales medidas por JS (--appbar-h, --resumen-h), igual que antes se hacía con el thead sticky. */ .tabla-header-capa { display: block; position: sticky; top: calc(var(--appbar-h) + var(--resumen-h)); z-index: 6; background: var(--surface); border: 1px solid var(--line); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; } .tabla-header-capa-scroll { overflow: hidden; } /* overflow oculto a propósito: el desplazamiento horizontal de esta capa se sincroniza vía JS con el de la tabla real (ver reporte-semanal.html), no se desplaza por interacción directa del usuario sobre ella. */ .tabla-header-capa table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; table-layout: fixed; } .tabla-header-capa thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 2px 0 5px rgba(0, 0, 0, 0.12); } /* Anchos de columna compartidos entre la capa de cabecera y la tabla real, para que ambas queden alineadas al desplazarse horizontalmente. */ #tablaReporte, .tabla-header-capa table { table-layout: fixed; min-width: 680px; } .tabla-header-capa th:nth-child(1), #tablaReporte th:nth-child(1), #tablaReporte td:nth-child(1) { width: 16%; } .tabla-header-capa th:nth-child(2), #tablaReporte th:nth-child(2), #tablaReporte td:nth-child(2) { width: 12%; } .tabla-header-capa th:nth-child(3), #tablaReporte th:nth-child(3), #tablaReporte td:nth-child(3) { width: 12%; } .tabla-header-capa th:nth-child(4), #tablaReporte th:nth-child(4), #tablaReporte td:nth-child(4) { width: 12%; } .tabla-header-capa th:nth-child(5), #tablaReporte th:nth-child(5), #tablaReporte td:nth-child(5) { width: 12%; } .tabla-header-capa th:nth-child(6), #tablaReporte th:nth-child(6), #tablaReporte td:nth-child(6) { width: 12%; } .tabla-header-capa th:nth-child(7), #tablaReporte th:nth-child(7), #tablaReporte td:nth-child(7) { width: 12%; } .tabla-header-capa th:nth-child(8), #tablaReporte th:nth-child(8), #tablaReporte td:nth-child(8) { width: 12%; } .tabla-header-capa th:nth-child(9), #tablaReporte th:nth-child(9), #tablaReporte td:nth-child(9) { width: 12%; } } /* ═══════════════════════════════════════════════════════ IMPRESIÓN — OFICIO (216 × 330 mm) ═══════════════════════════════════════════════════════ */ @media print { /* Al imprimir siempre se ve el texto "(entrada)"/"(salida)" completo, nunca el icono pensado solo para pantallas angostas. */ .marca-advertencia-texto { display: inline !important; } .marca-advertencia-icono { display: none !important; } /* Igual criterio para la cabecera "Horas asist./ordin./extra". */ .th-horas-full { display: inline !important; } .th-horas-corta { display: none !important; } /* Forzar colores claros independiente del tema activo */ :root, html.dark { --bg: #ffffff; --surface: #ffffff; --ink: #000000; --ink-soft: #555555; --line: #cccccc; --accent-deep: #333333; --warn: #c0392b; --ok: #27ae60; } @page { size: 216mm 330mm; margin: 15mm 12mm 18mm 12mm; /* Número de página al pie. Soporte de navegador limitado (Chrome lo respeta de forma parcial); como respaldo, se puede activar "Encabezados y pies de página" en el diálogo de impresión. */ @bottom-center { content: "Página " counter(page) " de " counter(pages); font-size: 8pt; color: #666; } } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { background: #fff; font-size: 10pt; } /* Ocultar todo lo que no es contenido del reporte */ header.appbar, .filtros, .btn-imprimir, .btn-tema, .btn-salir, .estado-msg, .menu-acciones, .toast-contenedor, nav, .usuario-bar { display: none !important; } /* Cabecera de impresión generada por JS */ .print-header { display: block !important; margin-bottom: 14pt; border-bottom: 1.5pt solid #000; padding-bottom: 8pt; } .print-header h2 { font-size: 14pt; margin: 0 0 3pt; font-family: Georgia, serif; } .print-header p { font-size: 9pt; color: #555; margin: 0; } main { max-width: 100%; padding: 0; margin: 0; } /* 5: al imprimir, la tabla debe verse "tal cual" (thead en su lugar normal respecto del tbody) y la resumen-bar en su posición normal, sin solapar la parte superior de la página. Se resetea explícitamente cualquier estado responsive/mobile que pudiera haber quedado activo (sticky, encogido, oculto), independiente del ancho de la ventana. */ .resumen-bar.resumen-bar-cargado { position: static !important; top: auto !important; background: transparent !important; } .resumen-bar.resumen-bar-cargado .resumen-titulo { display: block !important; } .resumen-bar.resumen-bar-cargado .resumen-items { flex-wrap: wrap !important; } .tabla-header-capa { display: none !important; } #tablaReporte thead { display: table-header-group !important; } .resumen-bar { margin-bottom: 10pt; gap: 6pt; } .resumen-seccion { border: 0.5pt solid #ccc; padding: 6pt 8pt 8pt; page-break-inside: avoid; } .resumen-seccion.resumen-corte { border-left: 2pt solid #333; } .resumen-titulo { font-size: 7.5pt; margin-bottom: 6pt; } .resumen-items { gap: 10pt; } .resumen-seccion .resumen-item { padding-right: 10pt; } .resumen-item .num { font-size: 16pt; } .resumen-item .label { font-size: 7.5pt; } .tabla-wrap { border: 0.5pt solid #ccc; overflow: visible; border-radius: 0; } table { width: 100%; font-size: 8.5pt; min-width: 0; table-layout: fixed; } /* Anchos de columna ajustados a carta */ thead th:nth-child(1) { width: 13%; } /* Día */ thead th:nth-child(2) { width: 8%; } /* H. entrada */ thead th:nth-child(3) { width: 8%; } /* H. salida */ thead th:nth-child(4) { width: 8%; } /* Entrada */ thead th:nth-child(5) { width: 8%; } /* Salida */ thead th:nth-child(6) { width: 11%; } /* Horas asist.*/ thead th:nth-child(7) { width: 11%; } /* Horas ordin.*/ thead th:nth-child(8) { width: 11%; } /* Horas extra */ thead th:nth-child(9) { width: 9%; } /* Atraso */ thead th { font-size: 7pt; padding: 5pt 5pt; background: #f0f0f0 !important; } tbody td { padding: 4pt 5pt; border-bottom: 0.4pt solid #ddd; white-space: normal; word-break: break-word; } tbody tr:hover { background: transparent; } tr.fila-atraso { background: #fff8f7 !important; } tr.fila-atraso-fuerte { background: #fff0e0 !important; } tr.fila-ausencia { background: #eef6fa !important; } tr.fila-cambio-turno { background: #fdf0f4 !important; } tr.fila-domingo { background: #fdeceb !important; } tr.fila-feriado { background: #eef8ee !important; } tr.fila-recreada td:first-child { border-left: 3pt solid #1565c0 !important; } tr.fila-recreada td:last-child { border-right: 3pt solid #1565c0 !important; } tr.fila-recreada td { border-top: 1.5pt solid #1565c0 !important; border-bottom: 1.5pt solid #1565c0 !important; } .leyenda-reporte { margin-top: 8pt; gap: 10pt; font-size: 7pt; page-break-inside: avoid; } .leyenda-swatch { width: 8pt; height: 8pt; } /* Los días "fuera de mes" y cualquier detalle de marcas abierto no se imprimen: solo aportan ruido visual al reporte impreso. */ tr.dia-fuera-mes, tr.fila-marcas-detalle { display: none !important; } /* Repetir cabecera en cada página */ thead { display: table-header-group; } tbody { display: table-row-group; } tfoot { display: table-footer-group; } /* Evitar cortes dentro de filas */ tr { page-break-inside: avoid; } /* 9d: al imprimir, las filas y columnas fijadas (position: sticky) de la vista responsiva deben mostrarse como si nunca lo hubiesen estado — sin desplazamiento, sombra ni fondo forzado. Se cubren además TODAS las tablas de .tabla-wrap (no solo #tablaReporte), por si algún navegador llegó a heredar algún estado sticky en las tablas pequeñas del informe de incidencias. */ .tabla-wrap table th:first-child, .tabla-wrap table td:first-child, .tabla-wrap table thead th { position: static !important; top: auto !important; left: auto !important; box-shadow: none !important; } /* La leyenda de arriba (oculta en mobile hasta cargar datos) siempre se imprime, ya con los datos cargados. */ #leyendaArriba { display: flex !important; } } /* Ocultar cabecera de impresión en pantalla */ .print-header { display: none; } /* ═══════════════════════════════════════════════════════ PWA — asistente de instalación en iPhone/iPad ═══════════════════════════════════════════════════════ */ .pwa-ios-asistente { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 999; background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: 14px 40px 14px 16px; font-size: 13px; line-height: 1.5; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); } .pwa-ios-asistente-titulo { font-weight: 700; margin-bottom: 4px; } .pwa-ios-asistente strong { font-weight: 700; } .pwa-ios-icono-compartir { display: inline-block; } .pwa-ios-asistente-cerrar { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--bg); opacity: 0.75; font-size: 15px; cursor: pointer; padding: 4px; } .pwa-ios-asistente-cerrar:hover { opacity: 1; } .btn-instalar-app { display: flex; align-items: center; gap: 6px; } /* ═══════════════════════════════════════════════════════ Modal — Compartir app (código QR) ═══════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-overlay[hidden] { display: none; } .modal-compartir { position: relative; background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 28px 24px 22px; max-width: 320px; width: 100%; text-align: center; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32); } .modal-compartir-titulo { margin: 0 0 16px; font-family: 'Georgia', 'Times New Roman', serif; font-size: 18px; font-weight: 700; } .modal-compartir-qr { display: flex; align-items: center; justify-content: center; min-height: 220px; margin: 0 auto 16px; padding: 10px; background: #ffffff; border-radius: var(--radius); border: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); } .modal-compartir-qr svg { display: block; width: 100%; height: auto; max-width: 220px; } .modal-compartir-texto { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); } .modal-compartir-cerrar { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--ink-soft); font-size: 16px; cursor: pointer; padding: 4px 8px; } .modal-compartir-cerrar:hover { color: var(--ink); } @media print { .pwa-ios-asistente { display: none !important; } .modal-overlay { display: none !important; } }