/* ============================================================================ INBTEL RRHH · movil.css ---------------------------------------------------------------------------- El panel en el teléfono. `main.css` se queda intacto: aquí solo hay correcciones dentro de media queries, así que en escritorio nada cambia. Carga DESPUÉS de main.css y de nav-iconos.css en las 21 páginas, para poder pisar reglas de la misma especificidad sin recurrir a !important. Dónde sí hay !important y por qué: lo que se corrige está escrito EN LÍNEA por los pintores (`style="...text-overflow:ellipsis"`, `style="width:26px"`). Un estilo en línea solo se puede pisar así; es el caso para el que existe la palabra. Todo lo de aquí sale de medir las 19 pantallas a 390 y a 320 px, con táctil emulado. Ninguna regla es preventiva. ========================================================================== */ /* ============================================================================ 1 · OBJETIVOS DE TOQUE ---------------------------------------------------------------------------- `main.css` ya traía `--touch: 44px` con el comentario «mínimo táctil en PWA», pero no se aplicaba a los botones: `--control-h` valía 36 px, `.btn-sm` 30, `.filter-tab` 30 y cinco botones de icono llevaban 26–32 px en línea. No había NI UNA regla para pantalla táctil. 36 px es la medida con la que se falla el botón y se toca la fila de al lado. Se sube el token que manda y lo heredan de golpe los botones, los de icono, la campana, el cambio de tema, el menú y los campos de formulario. ========================================================================== */ @media (pointer: coarse) { :root { --control-h: var(--touch); } /* El !important es por lo de siempre en este archivo: hay 12 botones .btn-sm con el min-height ESCRITO EN LÍNEA (36 y 40 px) en ficha-colaborador.js, ficha-movil.js y solicitudes-tabla.js, y el estilo en línea le ganaba a esta regla: se quedaban por debajo del mínimo táctil mientras el resto del panel subía a 44. Quitarlos de cada sitio los habría encogido a 30 px en escritorio, que es lo que vale .btn-sm ahí; así suben solo donde hace falta y cualquier min-height en línea que alguien añada mañana queda corregido de oficio. Los 63 que ya traen 44 en línea no cambian. */ .btn-sm { min-height: var(--touch) !important; } .filter-tab { min-height: var(--touch); } /* Las flechas de mes del calendario, el de detalle y el de revelar llevan su tamaño en línea. */ .btn-icon { width: var(--touch) !important; height: var(--touch) !important; } /* Los segmentados. main.css ya los subía a 38 px en móvil (línea 2873): la intención estaba, se quedó a 6 px. Son 38 controles repartidos en Usuarios, Festivos, Auditoría y Reclutamiento. */ .seg-op { min-height: var(--touch); } /* Las fichas de filtro de Empleados: «31 sin turno asignado» y sus dos hermanas, en 38 px. */ .hueco { min-height: var(--touch); } /* El nombre enlazado ES la acción de la fila: abre la cuenta en Usuarios y el tablero en Reclutamiento. Son en línea, así que medían 16 px de alto — la altura del texto y nada más. Se les da caja propia. (Apunté primero a data-ver, que no existe: los atributos reales son data-editar y data-tablero.) */ a[data-editar], a[data-tablero], a[data-ver] { display: inline-flex; align-items: center; min-height: var(--touch); } /* Los dos de Configuración: el enlace a Auditoría del aviso de cabecera (18 px) y el «+ N más» de las palabras vetadas (30 px). */ .cfg-banner-link, .cfg-mas { min-height: var(--touch); display: inline-flex; align-items: center; } } /* ============================================================================ 2 · EL TEXTO QUE SE CORTABA ---------------------------------------------------------------------------- Las filas están pensadas a una línea. En el teléfono eso corta precisamente lo que las diferencia: «Creación de su correo institucional» y «Creación de número business» quedaban cortados en el mismo punto y se leían igual. En Empleados los nombres perdían hasta 130 px; en Oficinas, las direcciones 158. Se permiten DOS líneas, con puntos suspensivos en la segunda. Dos y no libres: con tres o cuatro, una lista de 44 personas deja de poderse recorrer. ========================================================================== */ @media (max-width: 620px) { /* Las que viven en main.css */ .emp-fila .f-nombre, .emp-fila .f-cargo, .tk-fila .t-asunto, .agenda-item .a-que, .asis-excepcion .x-nombre, .fichar-lugar .l-nombre, .empleado-nombre, .usuario-nombre, .notification-message { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Y las 21 que los pintores escriben en línea, repartidas en diez archivos: direcciones de oficina, descripciones de festivo, nombres de área, filas de informes y de auditoría… Se alcanzan por lo que HACEN, no una por una, así que las que se añadan mañana quedan cubiertas solas. */ [style*="text-overflow:ellipsis"], [style*="text-overflow: ellipsis"] { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; } /* Un usuario o un correo no se entiende a medias: antes de perder el final se parte donde haga falta. */ .cred-fila .c-usuario { white-space: normal; overflow-wrap: anywhere; } } /* ============================================================================ 3 · CAJAS QUE DEJABAN AL TEXTO SIN ANCHO ---------------------------------------------------------------------------- El aviso de calidad de datos del Dashboard es una fila: icono + texto + botón. A 320 px el botón se queda 150 px y al título le sobraban 97: «La puntualidad de 31 empleados no se puede calcular» caía en una columna de 97×98 px. Se deja que el botón baje a su propia línea. ========================================================================== */ @media (max-width: 620px) { .dash-aviso-datos { flex-wrap: wrap; } .dash-aviso-datos .d-texto { flex: 1 1 190px; } .dash-aviso-datos .btn { margin-left: auto; } } /* ============================================================================ 4 · EL TÍTULO DE LA PÁGINA ---------------------------------------------------------------------------- A 320 px «Gestión de Empleados» y «Gestión de Oficinas» perdían letras. Bajan de tamaño antes que cortarse; siguen siendo lo más grande de la cabecera. ========================================================================== */ @media (max-width: 620px) { .topbar-title { font-size: var(--fs-body); } } @media (max-width: 380px) { .topbar-title { font-size: var(--fs-sm); } } /* ============================================================================ 5 · LA VISTA MES DEL HISTORIAL, APILADA ---------------------------------------------------------------------------- `vistaMes` pinta 110px + 7 columnas + 120px con el ancho EN LÍNEA. A 390 px cada día queda en unos 20: los encabezados se solapan hasta leerse «LUMARIÉUEVIESÁDOM» y los estados en «sinsi si si si sin». Apilado: la etiqueta de la semana arriba, un día por fila, y el total al pie. Los !important son porque el ancho de la rejilla va en el atributo style. ========================================================================== */ @media (max-width: 620px) { /* La tira Lun…Dom no aporta nada cuando cada fila ya dice su día. */ .mes-cabecera { display: none !important; } .mes-fila { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; padding: 10px 12px !important; } /* Los días pasan a filas de alto tocable, con el número y el estado en línea en vez de apilados en una columna de 20 px. */ .mes-fila > a, .mes-fila > span:not(:first-child):not(:last-child) { min-height: 44px; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } /* El total de la semana, al pie y alineado a la izquierda como el resto. */ .mes-fila > *:last-child { text-align: left !important; padding-top: 4px; } } /* ============================================================================ 6 · MIS AUSENCIAS, EN UNA COLUMNA ---------------------------------------------------------------------------- mis-ausencias.js pinta «minmax(0,1fr) 300px» con el ancho EN LÍNEA: en un teléfono el calendario se queda sus 300 px y a Mis solicitudes le tocan unos 40, donde «Vacaciones» se corta en «Vacacione» y en Quién falta el nombre del festivo desaparece del todo (.a-que es nowrap + ellipsis). ========================================================================== */ @media (max-width: 620px) { .mis-aus-cols { grid-template-columns: minmax(0, 1fr) !important; } } /* ============================================================================ 7 · LA CABECERA DE MI PERFIL, APILADA ---------------------------------------------------------------------------- Foto · nombre · «Cambiar mi contraseña» van en una fila flex con el nombre en flex:1 y min-width:0: en 390 px el botón se queda su ancho y el nombre cae a una palabra por línea. El equipo va en dos columnas de ~150 px. Apilado: la foto centrada, el nombre y sus líneas debajo, los botones a lo ancho; el equipo en una columna. Sigue las medidas del mockup 29e. ========================================================================== */ @media (max-width: 620px) { .perfil-cabecera { flex-direction: column; align-items: stretch !important; text-align: center; } .perfil-cabecera > span:first-child { align-self: center; } .perfil-cabecera > span:nth-child(2) { align-items: center; } .perfil-cabecera > .btn { justify-content: center; } .perfil-equipo { grid-template-columns: minmax(0, 1fr) !important; } } /* ============================================================================ 8 · SEMANA Y DÍA DEL HISTORIAL, EN TRES LÍNEAS ---------------------------------------------------------------------------- vistaSemana pinta «96px + barra + 150px» y vistaDia «80px + texto + 150px», con el ancho EN LÍNEA. A 390 px la barra de cada día se quedaba en 96 px y la oficina del fichaje en 60. El mock 29b pide la fila de Semana en tres líneas — «Lun 31 · Puntual» a la izquierda con las HORAS A LA DERECHA / la barra a lo ancho / el detalle — y la de Día con tipo + hora y el dispositivo a la derecha / la oficina debajo. Se reparte con áreas de rejilla sobre las clases que el módulo ya lleva. Los !important son por el estilo en línea. ========================================================================== */ @media (max-width: 620px) { .sem-escala { grid-template-columns: minmax(0, 1fr) !important; padding: 6px 16px 2px !important; margin: 0 -12px; } .sem-escala > span:empty { display: none; } .sem-fila { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "dia horas" "barra barra" "detalle detalle"; gap: 6px 12px !important; padding: 10px 16px !important; margin: 0 -12px; align-items: start !important; } /* día y estado en una sola línea: «Lun 31 · Puntual» */ .sem-fila > .sem-dia { grid-area: dia; flex-direction: row !important; align-items: baseline; gap: 6px; flex-wrap: wrap; } .sem-fila > .sem-dia > :nth-child(2)::before { content: '· '; } .sem-fila > .barra-pista { grid-area: barra; } /* descanso · festivo · ausencia: una sola etiqueta, arriba a la derecha */ .sem-fila > .sem-derecha { grid-area: horas; text-align: right !important; } /* horas + detalle: la caja se disuelve y cada hijo va a su área */ .sem-fila > .sem-doble { display: contents !important; } .sem-fila .sem-horas { grid-area: horas; text-align: right; } .sem-fila .sem-detalle { grid-area: detalle; text-align: left; } /* «Sáb 5 · Dom 6 — descanso», a lo ancho como las filas */ .sem-descanso { margin: 0 -12px; padding: 10px 16px !important; } .dia-fila { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "cuando desde" "donde donde"; gap: 6px 12px !important; padding: 10px 16px !important; margin: 0 -12px; align-items: start !important; } .dia-fila > .dia-cuando { grid-area: cuando; } .dia-fila > .dia-donde { grid-area: donde; } .dia-fila > .dia-desde { grid-area: desde; } }