/* APLICACIÓN DEL TRABAJADOR (módulo Empleados).
   Reutiliza el sistema de diseño de la oficina (base.css: colores, header, bottom-nav,
   botones) porque §3.5 pide mantener la imagen ya empleada. Aquí solo va lo propio:
   la barra de tres apartados, el fichaje —que tiene protagonismo visual claramente
   superior al resto— y la rejilla de accesos. */

/* ---------- Barra inferior del trabajador ---------- */

/* Menos botones que en la oficina (allí son cinco), así que piden algo más de aire: si no,
   quedan islas sueltas con hueco en medio. */
.nav-empleados .nav-btn {
  font-size: 10.5px;
  gap: 6px;
}

/* Envuelve el icono para poder colgarle el punto rojo sin descolocar el texto. */
.nav-icono {
  position: relative;
  display: inline-flex;
}

/* §3.3: punto rojo sobre el apartado que contiene el asunto pendiente, para que se vea
   sin necesidad de entrar. El borde del color de la barra lo despega del icono. */
.nav-punto {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--error);
  border: 2px solid var(--negro);
}

/* ---------- Fichaje ---------- */

.fichaje {
  background: var(--blanco);
  border-radius: var(--radio);
  border-top: 4px solid var(--amarillo);
  box-shadow: var(--sombra);
  padding: 18px 16px 20px;
  text-align: center;
}

/* §3.2: el estado actual, en grande y arriba del todo. */
.fichaje-estado {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.25;
}

.fichaje-estado.trabajando {
  color: var(--exito);
}

.fichaje-estado.fuera {
  color: var(--gris-medio);
}

.fichaje-detalle {
  margin-top: 3px;
  font-size: 13px;
  color: var(--gris-medio);
}

/* §3.2: el botón ocupa aproximadamente un tercio de la pantalla. En vh para que sea ese
   tercio en cualquier móvil, con topes para que no se descontrole en tableta. */
.fichaje-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 30vh;
  min-height: 160px;
  max-height: 260px;
  margin-top: 16px;
  border: none;
  border-radius: 18px;
  background: var(--negro);
  color: var(--amarillo);
  font-family: inherit;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: var(--sombra);
}

.fichaje-btn svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: var(--amarillo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fichaje-btn:active {
  transform: scale(.98);
}

.fichaje-btn:disabled {
  opacity: .55;
}

/* Cuando toca salir se invierte: fondo amarillo y letra negra. El gesto es el mismo, pero
   el color avisa de que no es la misma acción que a la entrada. */
.fichaje-btn.salida {
  background: var(--amarillo);
  color: var(--negro);
}

.fichaje-btn.salida svg {
  stroke: var(--negro);
}

.fichaje-aviso {
  margin-top: 10px;
  font-size: 12px;
  color: var(--gris-medio);
  line-height: 1.45;
}

/* ---------- Bandeja de pendientes ---------- */

/* §3.2: si no hay nada pendiente, no aparece nada. De eso se encarga el JS ocultando el
   contenedor entero, no dejando una tarjeta vacía. */
.pendientes {
  margin-top: 16px;
}

.pendientes-titulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gris-medio);
  margin-bottom: 7px;
}

.pendiente-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  margin-bottom: 8px;
  border: 1.5px solid var(--borde);
  border-left: 4px solid var(--error);
  border-radius: 12px;
  background: var(--blanco);
  font-family: inherit;
}

.pendiente-item:active {
  background: var(--gris-suave);
}

.pendiente-texto {
  flex: 1;
  min-width: 0;
}

/* Son <span> dentro del botón (un <div> dentro de un <button> no es válido), así que hay
   que forzarles el salto de línea o título y detalle salen seguidos. */
.pendiente-titulo {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--negro);
}

.pendiente-sub {
  display: block;
  font-size: 12.5px;
  color: var(--gris-medio);
  margin-top: 1px;
}

.pendiente-flecha {
  color: var(--gris-medio);
  font-size: 19px;
  flex-shrink: 0;
}

/* ---------- Rejilla de accesos ---------- */

/* Mismo patrón que .mas-grid de la oficina, pero con los puntos característicos de la
   marca como icono de cada función (§3.5). */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.emp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 10px;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra);
  text-decoration: none;
  color: var(--negro);
  text-align: center;
  min-height: 104px;
}

.emp-item:active {
  background: var(--amarillo-suave);
}

.emp-item svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: var(--negro);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.emp-item .label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

/* Las fichas de seguridad se quedan en primer nivel aunque se consulten poco: hay que
   poder llegar a ellas de inmediato ante un accidente con un producto químico (§3.4).
   Por eso van marcadas en rojo, no como una función más. */
.emp-item.urgente {
  border: 2px solid var(--error);
}

.emp-item.urgente svg {
  stroke: var(--error);
}

/* Función prevista cuya pantalla todavía no existe. */
.emp-item.pendiente {
  opacity: .45;
  pointer-events: none;
}

/* ---------- Aviso de módulo en construcción ---------- */

.emp-aviso {
  background: var(--amarillo-suave);
  border: 1.5px solid var(--amarillo);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gris-oscuro);
}

.emp-aviso strong {
  display: block;
  margin-bottom: 3px;
  color: var(--negro);
}

/* ---------- Acceso del trabajador (§2) ----------
   Reutiliza .pantalla-login / .login-caja / .login-logo de login.css, que es la pantalla
   de entrada que ya existe: §3.5 pide mantener la imagen de la aplicación. Aquí solo va
   lo propio del PIN de seis cifras. */

.pin-caja {
  position: relative;
  margin: 6px 0 4px;
}

.pin-recuadros {
  display: flex;
  gap: 7px;
  justify-content: space-between;
}

.pin-recuadro {
  flex: 1;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  background: var(--blanco);
  font-size: 24px;
  line-height: 1;
  color: var(--negro);
}

/* Marca dónde va la siguiente cifra: sin esto hay que contar las que ya hay. */
.pin-recuadro.activo {
  border-color: var(--amarillo);
  border-width: 2.5px;
}

/* Las cifras se ven (31/08/2026). Antes eran puntos, y un punto no se puede comprobar: se
   teclea mal, se falla cinco veces y el acceso se bloquea cinco minutos.
   Algo más gruesas y con las cifras de ancho fijo, para que 1 y 7 ocupen lo mismo y el
   número no baile al ir marcándolo. */
.pin-recuadro.pin-cifra {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* El campo de verdad va encima y transparente: recoge el teclado, el pegado y el
   retroceso, mientras los recuadros de debajo solo pintan. El color transparente esconde
   además el cursor, que si no se vería parpadear en una esquina. */
.pin-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px; /* menos de 16px hace que iOS acerque la página al enfocar */
  text-align: center;
  outline: none;
  -webkit-appearance: none;
}

.pin-desactivado {
  opacity: .5;
}

/* Enlaces secundarios de la pantalla de acceso (he olvidado el PIN, reenviar código). */
.acceso-enlace {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gris-medio);
  text-align: center;
  text-decoration: none;
}

.acceso-enlace:active {
  color: var(--negro);
}

.acceso-ayuda {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gris-medio);
  text-align: center;
  margin-bottom: 16px;
}

.acceso-titulo {
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
}

/* Aviso de bloqueo temporal por intentos fallidos (§2.3). Nunca es permanente. */
.acceso-bloqueo {
  background: #fdecea;
  border: 1.5px solid var(--error);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #8c2018;
  text-align: center;
}

/* ---------- Globo de notificaciones sin leer ----------
   El círculo rojo con el número encima del icono, como el de las aplicaciones del móvil.
   Se pinta solo cuando hay algo (ver pintarAccesos): un globo con un 0 llama la atención
   para nada. */

.emp-icono {
  position: relative;
  display: inline-flex;
}

.emp-globo {
  position: absolute;
  top: -7px;
  /* Desplazado a la derecha del icono, no encima: si tapa el dibujo, deja de
     reconocerse de un vistazo cuál es la función. */
  left: 100%;
  margin-left: -9px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--error);
  border: 2px solid var(--blanco);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  /* Que no se herede el apagado de las funciones aún sin pantalla: el número tiene que
     leerse igual. */
  opacity: 1;
}

/* La tarjeta apagada no debe apagar también el globo, o el aviso pasa desapercibido justo
   en la pantalla donde tiene que verse. */
.emp-item.pendiente {
  opacity: 1;
}

.emp-item.pendiente svg,
.emp-item.pendiente .label {
  opacity: .45;
}

/* ---------- Fichas técnicas y de seguridad ----------
   Todo en una línea: foto, nombre y descripción, y los dos iconos a la derecha. Debajo,
   en su propia línea, cuándo se actualizó cada ficha. */

.fs-buscador {
  margin-bottom: 12px;
}

.fs-producto {
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 8px;
}

.fs-linea {
  display: flex;
  align-items: center;
  gap: 11px;
}

.fs-imagen {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--gris-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fs-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-sin-imagen {
  font-size: 9.5px;
  color: var(--gris-medio);
  text-align: center;
}

/* min-width:0 para que el texto largo se recorte en vez de empujar los iconos fuera de la
   tarjeta, que es lo que pasa en una caja flexible sin esto. */
.fs-datos {
  flex: 1;
  min-width: 0;
}

.fs-nombre {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}

/* Dos líneas como mucho: la descripción orienta, no es la ficha. */
.fs-descripcion {
  font-size: 12px;
  line-height: 1.35;
  color: var(--gris-medio);
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fs-iconos {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

/* Cuadrados y grandes: se pulsan con el dedo y a veces con prisa. */
.fs-icono {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--negro);
  border-radius: 9px;
  background: var(--negro);
  color: var(--amarillo);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
}

.fs-icono:active {
  transform: scale(.95);
}

/* La ficha que no está subida se ve apagada, no se esconde: lo que falta hay que poder
   reclamarlo, y ocultarlo lo haría parecer al día. */
.fs-icono-vacio {
  background: var(--blanco);
  border-color: var(--borde);
  color: #bbb;
}

/* Cuándo se actualizó cada una. En su propia línea porque arriba no cabe, y porque es el
   dato que se mira en una inspección. */
.fs-fechas {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  color: var(--gris-medio);
}

/* ---------- Hoy ---------- */

.hoy-fecha {
  font-size: 15px;
  font-weight: 800;
  text-transform: capitalize;
  margin-bottom: 12px;
}

.hoy-card {
  margin-bottom: 8px;
}

/* Hora y cliente en la misma línea: la hora es lo que se busca al abrir. */
.hoy-linea {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hoy-hora {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 800;
  color: var(--negro);
}

.hoy-cliente {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}

.hoy-tipo {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--amarillo-suave);
  border: 1px solid var(--amarillo);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
}

.hoy-direccion {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--gris-medio);
}

/* Las llaves se avisan aparte y en rojo: si se olvidan, el trabajador llega al centro y no
   puede entrar. */
.hoy-llaves {
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fdecea;
  border: 1.5px solid var(--error);
  font-size: 12px;
  font-weight: 700;
  color: #8c2018;
}

/* LO DE HOY — la pantalla con la que se ficha.
   Todo aquí está dimensionado para el §6.1: con guantes, con prisa, en un portal mal
   iluminado. Los botones son grandes porque el dedo no acierta en uno pequeño. */

.emp-jornada {
  background: #e6f4ea;
  color: #1e7e34;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.emp-jornada.cerrada { background: #f2f2f2; color: #666; }

.emp-trabajo {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* El que toca ahora, destacado. Sigue pudiéndose fichar cualquiera (§6.3: el orden guía, no
   impone), pero el que toca tiene que verse sin buscarlo. */
.emp-trabajo.ahora {
  border: 2px solid var(--amarillo, #f5c518);
}

.emp-trabajo.terminado { opacity: 0.65; }

.emp-ahora-etiqueta {
  display: inline-block;
  background: var(--amarillo, #f5c518);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}

.emp-trabajo-hora { font-size: 22px; font-weight: 800; }
.emp-trabajo-cliente { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.emp-trabajo-dato { font-size: 13px; color: #666; }

/* Dirección y teléfono: se pulsan y hacen algo. No están para leerlos. */
.emp-trabajo-enlace {
  display: block;
  margin-top: 6px;
  padding: 8px 0;
  color: #1a5fb4;
  font-size: 15px;
  text-decoration: none;
}

.emp-trabajo-estado { margin: 8px 0; }

.emp-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

.emp-estado.pendiente { background: #f2f2f2; color: #666; }
.emp-estado.dentro    { background: #e6f4ea; color: #1e7e34; }
.emp-estado.parado    { background: #fff3d6; color: #8a6a2a; }
.emp-estado.hecho     { background: #eef2ff; color: #3b4cca; }

.emp-pausas {
  font-size: 13px;
  color: #777;
  padding-left: 10px;
  border-left: 2px solid #ececec;
  margin-bottom: 8px;
}

.emp-trabajo-acciones { display: flex; flex-direction: column; gap: 8px; }

/* 52 px de alto: es lo que hace falta para acertar con guantes. */
.emp-boton-fichar {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 10px;
  background: #1e7e34;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.emp-boton-fichar.salida { background: #c0392b; }
.emp-boton-fichar:disabled { background: #ccc; }

.emp-boton-secundario {
  width: 100%;
  min-height: 46px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
}

/* Nota bajo el título de una carpeta de Ayuda. Solo la lleva la de guías, para distinguirlas
   de los vídeos sin tener que ponerle una etiqueta a cada línea. */
.ayuda-nota {
  font-size: 12px;
  color: #777;
  line-height: 1.4;
  margin: -4px 0 8px;
}

/* El dibujo de la tarjeta de ayuda. Antes era el carácter ⓘ suelto en un recuadro gris, y se
   veía como una imagen que no había cargado. Mismo trazo que el resto de iconos de la
   aplicación (ver .nav-btn svg en base.css): sin relleno, y el color del texto. */
.ayuda-icono svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--negro);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* MOVER UN TRABAJO DE SITIO.
   El asa va arriba a la derecha de la tarjeta y es lo único que arrastra: la tarjeta entera
   lleva dentro botones, la dirección y el teléfono, y arrastrando desde cualquier punto no se
   podrían pulsar ni desplazar la lista con el dedo. */
.emp-trabajo {
  position: relative;
}
.emp-agarre {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--gris-medio, #aaa);
  cursor: grab;
  /* Sin esto, arrastrar el asa desplaza la página en vez de mover la tarjeta. */
  touch-action: none;
}
.emp-trabajo.moviendo {
  opacity: .75;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  cursor: grabbing;
}
/* Lo que no se puede mover lo dice, en vez de dejar a alguien intentándolo. */
.emp-fijo {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: 45%;
  font-size: 10px;
  line-height: 1.3;
  text-align: right;
  color: #777;
}
@media (prefers-reduced-motion: reduce) {
  .emp-trabajo.moviendo { box-shadow: none; }
}

/* ===========================================================================
   VACACIONES DEL TRABAJADOR
   =========================================================================== */

.vac-titulo {
  font-size: 14px;
  margin: 18px 0 8px;
}

/* §2.1 · El contador. Lo primero y más visible: es lo que más se consulta. */
.vac-contador {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.vac-grande {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.vac-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--negro);
}

.vac-etq {
  font-size: 14px;
  color: #666;
}

.vac-desglose {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #666;
}

.vac-nota {
  font-size: 12px;
  color: #777;
  line-height: 1.45;
  margin-top: 8px;
}

/* §2.2 · Periodos aprobados */
.vac-periodo,
.vac-solicitud {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

.vac-periodo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.vac-periodo-fechas { font-size: 15px; font-weight: 600; }
.vac-periodo-dias { font-size: 12px; color: #777; }

.vac-periodo-acciones {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* §2.4 · Solicitudes */
.vac-sol-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.vac-sol-fechas { font-size: 15px; font-weight: 600; }
.vac-sol-tipo { font-size: 12px; color: #7a5310; margin-top: 2px; }
.vac-sol-dias { font-size: 12px; color: #777; margin-top: 2px; }

.vac-estado {
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.vac-estado.pend { background: #fdf6e3; color: #7a5310; }
.vac-estado.ok   { background: #e8f5ec; color: #1e7e34; }
.vac-estado.no   { background: #fdf3f2; color: #c0392b; }
.vac-estado.gris { background: #f1f1f1; color: #777; }

/* Un aviso deja seguir; un bloqueo no. La diferencia tiene que verse de un vistazo, sin
   leer: ámbar es "sigue, pero entérate", rojo es "así no puede ser". */
.vac-aviso,
.vac-bloqueo,
.vac-motivo,
.vac-alternativa {
  font-size: 13px;
  line-height: 1.45;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 8px;
}

.vac-aviso      { background: #fdf6e3; border-left: 3px solid #c9891a; color: #7a5310; }
.vac-bloqueo    { background: #fdf3f2; border-left: 3px solid #c0392b; color: #8c2f22; }
.vac-motivo     { background: #f6f6f6; border-left: 3px solid #bbb; color: #555; }
.vac-alternativa{ background: #eef4fb; border-left: 3px solid #2d6a9f; color: #1a3a5c; }

.vac-resumen {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 4px;
}

/* §2.3 · El calendario */
.vac-cal {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
}

.vac-cal-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 8px;
}

.vac-cal-mover {
  width: 40px;
  min-height: 40px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--negro);
}

.vac-cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.vac-dia-cab {
  text-align: center;
  font-size: 11px;
  color: #999;
  padding-bottom: 4px;
}

/* 40px de alto mínimo: se toca con el dedo, no con un ratón. */
.vac-dia {
  min-height: 40px;
  border: none;
  border-radius: 6px;
  background: #f6f6f6;
  font-size: 14px;
  color: var(--negro);
  cursor: pointer;
}

.vac-dia.vacia { background: none; cursor: default; }
.vac-dia.domingo { color: #bbb; }
.vac-dia.pasada { color: #ccc; }

/* Se ve QUÉ está ocupado en la ruta, nunca QUIÉN lo tiene. */
.vac-dia.ocupado {
  background: #fdf6e3;
  color: #7a5310;
}

.vac-dia.elegido {
  background: var(--negro);
  color: var(--amarillo);
  font-weight: 700;
}

.vac-leyenda {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 11px;
  color: #777;
}

.vac-punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.vac-punto.elegido { background: var(--negro); }
.vac-punto.ocupado { background: #f0d79a; }

/* ===========================================================================
   CHECKLIST DEL TRABAJO (Calidad §2)
   =========================================================================== */

.chk-nota {
  font-size: 13px;
  color: #666;
  line-height: 1.45;
  margin-bottom: 12px;
}

.chk-linea {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

.chk-texto {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.chk-botones {
  display: flex;
  gap: 8px;
}

/* Dos botones grandes y nada más. Se marca con guantes puestos y a veces con una sola mano:
   una casilla de las de siempre se falla la mitad de las veces. */
.chk-btn {
  flex: 1;
  min-height: 46px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
}

.chk-btn.si.activo {
  background: #1e7e34;
  border-color: #1e7e34;
  color: #fff;
}

.chk-btn.no.activo {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

/* El motivo solo aparece si se marca "No": pedirlo siempre sería pedir por pedir, y aquí
   sin el porqué lo no hecho llega a oficina sin nada con lo que decidir. */
.chk-motivo {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.chk-motivo[hidden] { display: none; }

/* Sus horas del mes, dentro de Mi ficha. */
.horas-mes-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.horas-centros {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

.horas-centros b {
  display: block;
  margin-bottom: 4px;
  color: var(--negro);
}

/* Proponer un cambio de dirección, dentro de Mi ficha (§5 de la ficha ampliada). */
.prop-caja {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-top: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

.prop-titulo { font-size: 15px; font-weight: 600; }

.prop-nota {
  font-size: 12px;
  color: #777;
  line-height: 1.45;
  margin: 4px 0 10px;
}

.prop-caja input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 15px;
  margin-bottom: 8px;
}

.prop-lista {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.prop-item {
  font-size: 13px;
  padding: 6px 0;
}

.prop-estado {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}

/* SUBIR DOCUMENTOS DESDE EL MÓVIL.
   La cámara es lo que se usa el 90 % de las veces —el justificante del médico se fotografía—,
   así que va de botón grande; elegir un archivo, de texto al lado. */
.doc-botones {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-botones .btn-primary {
  flex: 1;
}

.doc-botones .btn-texto {
  background: none;
  border: none;
  color: #777;
  font-size: 14px;
  padding: 12px 2px;
  text-decoration: underline;
  flex-shrink: 0;
}

.doc-estado {
  margin-top: 10px;
  font-size: 13px;
  color: #116636;
  background: #eafaf0;
  border-radius: 8px;
  padding: 8px 10px;
}

.doc-estado[hidden] { display: none; }

/* La cruz de quitar solo sale en lo que ha subido él. Lo que deja oficina no se toca desde
   aquí: es documentación de la empresa, no suya para retirarla. */
.doc-fila {
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-fila .adj-item {
  flex: 1;
  min-width: 0;
}

.doc-quitar {
  background: none;
  border: none;
  color: #c0392b;
  font-size: 18px;
  padding: 8px 10px;
  flex-shrink: 0;
}

/* VER UNA FOTO A PANTALLA COMPLETA (compartido/visorFoto.js).
   Encima de todo, incluidas la cabecera y la barra de abajo, que en esta aplicación van
   fijas. */
.visor-foto {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, .92);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.visor-foto.abierto {
  display: flex;
}

.visor-img {
  max-width: 100%;
  /* Hueco para la X de arriba y el nombre de abajo: a pantalla completa la foto tapaba las
     dos cosas y no se veía por dónde salir. */
  max-height: calc(100% - 96px);
  object-fit: contain;
  border-radius: 6px;
}

/* Grande y separada del borde: se pulsa con el pulgar, muchas veces con una mano. */
.visor-cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.visor-pie {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  text-align: center;
  color: #ddd;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Con la foto abierta, lo de debajo no se desplaza. */
body.con-visor {
  overflow: hidden;
}

/* La papelera de cada foto, arriba a la derecha de su miniatura. */
.foto-caja {
  position: relative;
}

.foto-borrar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* Los atajos de día de Albaranes. Debajo del selector, no al lado: en un móvil estrecho al
   lado empujan el campo de fecha y lo dejan sin sitio. */
.alb-dias {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* «¿Un cambio en tus datos?» — plegado. La ficha se abre para mirar los datos, no para pedir
   un cambio, así que abierto se llevaba media pantalla cada vez sin hacer falta casi nunca. */
.prop-desplegar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.prop-flecha {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--gris-medio);
  transition: transform .15s ease;
}

.prop-desplegar.abierto .prop-flecha {
  transform: rotate(90deg);
}

.prop-cuerpo {
  margin-top: 10px;
}

.prop-cuerpo textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
}

/* DATOS QUE VIENEN DEL MÓVIL, NO DEL SERVIDOR (§4.4 de Sin Conexión).
   Se ve, pero no grita: lo que se enseña sigue siendo válido, solo hay que saber de cuándo
   es. La versión `viejo` sí cambia de color, porque a las 24 horas ya puede no serlo. */
.emp-guardado {
  background: #fdf3e2;
  border-left: 4px solid #c9891a;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b4a08;
}

.emp-guardado.viejo {
  background: #fceceb;
  border-left-color: #c0392b;
  color: #8a2b21;
  font-weight: 600;
}

/* PEDIR LA UBICACIÓN UNA VEZ, desde Inicio y con calma. Si no, el móvil pregunta mientras
   alguien intenta fichar a las seis de la mañana, que es cuando se pulsa lo que sea para
   quitarlo de en medio. Solo aparece si el permiso está sin decidir. */
.ubi-permiso {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  /* La sección del fichaje es BLANCA, no oscura: con texto claro no se veía nada. */
  background: #fbf6e8;
  border-left: 3px solid var(--amarillo);
  text-align: left;
}

.ubi-texto {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
  color: #5c4a1a;
}

.ubi-texto small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #8a7440;
  line-height: 1.45;
}

.ubi-btn {
  flex: none;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 800;
  background: var(--negro);
  color: var(--amarillo);
}
.ubi-btn:disabled { opacity: .6; }

/* El mismo hueco del error, en verde, para cuando lo que hay que decir es que ha ido bien. */
.mensaje-error.mensaje-ok {
  color: #1e7e34;
}

/* ---------------------------------------------------------------------------
 * FIRMA DE LA JORNADA (02/09/2026)
 *
 * El resumen del día que se firma. Se enseña ENTERO antes de la firma: firmar un total sin
 * ver el detalle no valida nada. En un móvil no cabe de una vez, así que el modal se hace
 * alto y el resumen se desplaza dentro. */
.modal-caja.modal-alto { max-height: 88vh; display: flex; flex-direction: column; }
.modal-caja.modal-alto #resumenJornada { overflow: auto; max-height: 42vh; }

.jf { font-size: 13px; color: #1c2430; }
.jf-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid var(--negro); padding-bottom: 6px; margin-bottom: 8px;
}
.jf-empresa { font-weight: 800; font-size: 14px; }
.jf-fiscal { font-size: 10.5px; color: #6b7482; }
.jf-tipo { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: #6b7482; }

.jf-datos { display: grid; gap: 2px; margin-bottom: 10px; }
.jf-datos div { display: flex; justify-content: space-between; gap: 10px; }
.jf-datos span { color: #6b7482; }

.jf-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.jf-tabla th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: #6b7482; border-bottom: 1px solid #e4e7ec; padding: 3px 0;
}
.jf-tabla td { padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
.jf-tabla tfoot td { font-weight: 700; border-top: 2px solid var(--negro); border-bottom: none; }
.jf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jf-hora { white-space: nowrap; color: #39424f; }

.jf-pausas { font-size: 11.5px; color: #6b7482; margin-top: 6px; }
.jf-declaracion {
  margin-top: 10px; padding: 8px 10px; background: #f7f8fa; border-radius: 8px;
  font-size: 12px; line-height: 1.45;
}
.jf-firma { margin-top: 10px; }
.jf-firma img { max-height: 70px; max-width: 100%; }
.jf-hueco {
  height: 54px; border: 1px dashed #c8ccd2; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #aeb5c0; font-size: 11px;
}
.jf-pie { font-size: 10.5px; color: #6b7482; border-top: 1px solid #e4e7ec; padding-top: 3px; margin-top: 4px; }

/* LA LISTA DE AYUDA (corregido el 02/09/2026).
   ---------------------------------------------------------------------------
   Estas líneas usaban `.adj-item` y `.adj-doc`, que son las MINIATURAS DE FOTOS de un
   adjunto: una tarjeta de 104 px con un recuadro gris de 78 px donde va la imagen. Aquí no
   hay imagen y no es una rejilla, es una lista — y además `.adj-item` se aplicaba sobre un
   `<a>`, que es de línea, así que su ancho de 104 px se ignoraba y el recuadro gris se
   estiraba a lo ancho de la pantalla. El resultado era una caja gris enorme encima de cada
   título, que parecía una imagen que no había cargado. Es exactamente lo que se reportó.
   Ahora tienen su propia forma: el icono a la izquierda, pequeño, y el texto al lado. */
.ayuda-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--borde);
  /* Un enlace subrayado dentro de una lista se lee como texto de un párrafo, no como una
     fila que se puede tocar. */
  text-decoration: none;
  color: inherit;
}

.ayuda-item:last-child {
  border-bottom: none;
}

/* El icono, en un cuadrado propio para que todas las filas empiecen a la misma altura
   aunque una descripción ocupe dos líneas. */
.ayuda-item .ayuda-icono {
  flex: 0 0 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-suave);
  border-radius: 10px;
}

.ayuda-item-texto {
  flex: 1;
  min-width: 0;
}

.ayuda-item-titulo {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--negro);
}

/* La descripción SÍ puede ocupar dos líneas: se lee de pie, y cortarla con puntos suspensivos
   —que es lo que hacía `.adj-nombre`— deja media frase. */
.ayuda-item-sub {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  color: #777;
  margin-top: 2px;
}

/* La flecha de la derecha: dice que se entra, sin necesidad de subrayar el título. */
.ayuda-item::after {
  content: '›';
  color: #bbb;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

/* EL ARCHIVO DE ALBARANES DEL TRABAJADOR (02/09/2026): cada línea se abre.
   Era una lista muerta —el número y poco más— y se pidió poder desplegarlos para volver a
   enseñárselos a quien los firmó. Se reaprovecha `.vac-periodo`, que ya da la caja; esto solo
   le quita lo de botón y le pone el «Ver» a la derecha. */
.alb-mio {
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.alb-mio-ver {
  color: var(--negro);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* El documento abierto ocupa casi toda la pantalla: es un papel, y en un recuadro pequeño no
   se lee. Con desplazamiento propio, que en un móvil no cabe entero. */
.alb-modal {
  max-width: 100%;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.alb-modal .alb-documento {
  overflow-y: auto;
  flex: 1;
}

/* LAS INDICACIONES CON FOTO DE LA ORDEN (03/09/2026).
 *
 * Dentro de la tarjeta del trabajo, entre la dirección y el estado: son parte de lo que hay
 * que saber ANTES de entrar, no un adjunto al final. Se tocan y se ven a pantalla completa —
 * con guantes y a las seis de la mañana, una miniatura no basta (§6.1). */
.emp-indic { margin: 8px 0 4px; }

.emp-indic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 6px;
  border: none;
  border-left: 3px solid var(--amarillo, #f2c200);
  border-radius: 8px;
  background: rgba(0, 0, 0, .04);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.emp-indic-item img {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(0, 0, 0, .08);
  /* Mismo motivo que en la oficina: una foto que no carga no puede estirar la fila. */
  overflow: hidden;
}

/* El rótulo que separa lo que vale siempre de lo de hoy. Igual que en la oficina: pequeño y
   en gris, porque son dos matices de la misma cosa y no dos apartados. */
.emp-indic-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--gris, #8a8a8a);
  margin: 8px 0 4px;
}

.emp-indic-item span { flex: 1 1 auto; font-size: 14px; line-height: 1.3; }

.emp-indic-lupa {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}

.emp-indic-lupa img { max-width: 100%; max-height: 76vh; border-radius: 10px; }
.emp-indic-lupa-txt { color: #fff; font-size: 16px; text-align: center; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   RECURRENCIAS DE RUTA (§3 de «Recurrencias de ruta»)
   --------------------------------------------------------------------------- */

/* El mes, con sus flechas. Mismo peso visual que la barra de fecha de Hoy: es lo primero
   que se mira al abrir. */
.rec-mes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.rec-mes-titulo {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  text-transform: capitalize;
}

.rec-mes-flecha {
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--gris-borde, #ddd);
  border-radius: 10px;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Las cuatro vistas. Cuatro caben en una línea de móvil si el texto es corto; por eso la
   última se llama «Mes pasado» y no «Por día del mes anterior». */
.rec-vistas {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.rec-vista {
  flex: 1;
  min-height: 40px;
  padding: 0 4px;
  border: 1px solid var(--gris-borde, #ddd);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.rec-vista.activa {
  background: var(--amarillo, #f5c518);
  border-color: var(--amarillo, #f5c518);
}

/* Zonas: se tocan para apagarlas. Marcadas todas al entrar (§3.3). */
.rec-zonas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* Un id con display no hace falta aquí porque `.rec-zonas` es una clase y no gana al
   [hidden] del navegador, pero la regla explícita ahorra la duda al siguiente que lo lea. */
.rec-zonas[hidden] { display: none; }

.rec-zona {
  padding: 6px 12px;
  border: 1px solid var(--gris-borde, #ddd);
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: #999;
  cursor: pointer;
}

.rec-zona.activa {
  background: var(--amarillo-suave, #fdf5d3);
  border-color: var(--amarillo, #f5c518);
  color: var(--negro, #111);
  font-weight: 700;
}

/* Lo que no es mensual, arriba y separado (§3.1). Barra roja en vez de la amarilla del
   resto: no es una sección más, es lo que se cae todos los meses. */
.rec-arriba {
  border-top: 3px solid #c0392b;
  margin-bottom: 16px;
}

.rec-arriba h3 { color: #c0392b; }

/* --- La rejilla del mes --- */
.rec-cal-cabecera,
.rec-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.rec-cal-cabecera {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gris-medio, #777);
  text-align: center;
}

.rec-dia {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--gris-borde, #eee);
  border-radius: 8px;
  background: #fff;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.rec-dia.vacia { border: none; background: none; }
.rec-dia[disabled] { color: #bbb; cursor: default; }

.rec-dia-num {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 11px;
  color: var(--gris-medio, #777);
}

/* El número de trabajos, en grande y centrado: es lo que se lee de un vistazo. */
.rec-dia-n {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 800;
}

.rec-dia.con-trabajo { background: var(--amarillo-suave, #fdf5d3); }
.rec-dia.todo-hecho { background: #e8f5e9; }
.rec-dia.todo-hecho .rec-dia-n { color: #1e7e34; }
.rec-dia.hoy { border: 2px solid var(--negro, #111); }
.rec-dia.abierto { outline: 2px solid var(--amarillo, #f5c518); }

.rec-cal-pie {
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--gris-medio, #777);
  text-align: center;
}

/* --- Semanas --- */
.rec-semanas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 2px;
}

.rec-sem {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--gris-borde, #ddd);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.rec-sem.activa {
  background: var(--amarillo, #f5c518);
  border-color: var(--amarillo, #f5c518);
}

.rec-sem-n {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .1);
  font-size: 12px;
}

.rec-titulo-grupo {
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 800;
  text-transform: capitalize;
}

.rec-sin-historial { color: #c9891a; }

.rec-nota {
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--gris-medio, #777);
}

/* --- La tarjeta --- */
.rec-card-alto {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.rec-card-fecha {
  font-size: 12px;
  font-weight: 700;
  color: var(--gris-medio, #777);
}

.rec-hora { font-size: 18px; }

.rec-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}

.rec-zona-etiq {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--gris-borde, #ddd);
  font-size: 11.5px;
  color: var(--gris-medio, #777);
}

/* La frecuencia solo se pinta cuando NO es mensual, y en rojo: es la única que importa
   leer, porque es la que no hay segunda oportunidad de hacer. */
.rec-frec {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  background: #fdecea;
  border: 1px solid #c0392b;
  font-size: 11.5px;
  font-weight: 700;
  color: #c0392b;
}

.rec-ir-hoy {
  display: block;
  margin-top: 8px;
  text-align: center;
  text-decoration: none;
  line-height: 44px;
}

/* --- §4 · La propuesta del mes --- */
.rec-propuesta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--amarillo-suave, #fdf5d3);
  border: 1px solid var(--amarillo, #f5c518);
}

.rec-propuesta[hidden] { display: none; }

.rec-propuesta-texto { flex: 1; font-size: 13px; line-height: 1.35; }

.rec-propuesta-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: var(--negro, #111);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.rec-propuesta-btn:disabled { opacity: .6; }

/* --- §6 · Lo que tiene cerca --- */
.rec-cerca {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #fff;
  border-left: 3px solid var(--negro, #111);
}

.rec-cerca[hidden] { display: none; }

.rec-cerca-titulo { font-size: 13px; font-weight: 800; margin-bottom: 6px; }

.rec-cerca-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  border-top: 1px solid var(--gris-borde, #eee);
}

.rec-cerca-cliente { font-weight: 700; }
.rec-cerca-porque { color: var(--gris-medio, #777); font-size: 12px; white-space: nowrap; }

/* --- §7 · Lo movido, y lo que la costumbre propone --- */
.rec-movido,
.rec-sugerido {
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.3;
}

.rec-movido { background: #f2f2f2; color: #555; }

/* Tres empujones ya no son una semana mala: es un patrón, y se ve. */
.rec-movido.mucho { background: #fdecea; color: #c0392b; font-weight: 700; }

.rec-sugerido { background: var(--amarillo-suave, #fdf5d3); color: #7a5c00; }

.rec-fijo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  background: #eef4ff;
  border: 1px solid #1a5fb4;
  font-size: 11.5px;
  font-weight: 700;
  color: #1a5fb4;
}

.rec-porque {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  background: #e8f5e9;
  border: 1px solid #1e7e34;
  font-size: 11.5px;
  color: #1e7e34;
}

/* --- §8 · No se pudo entrar --- */
.emp-estado.no-entro { background: #fdecea; color: #c0392b; }

/* La tarjeta entera se marca: lo que hay que leer de un vistazo es que sigue pendiente,
   no que alguien pasó por allí. */
.rec-card.no-entro { border-left: 3px solid #c0392b; }

.rec-motivos { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }

.rec-motivo {
  min-height: 48px;
  border: 1px solid var(--gris-borde, #ddd);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
}

.rec-semanas-modal { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.rec-semanas-modal .rec-sem { width: 100%; text-align: center; }

.rec-aviso-fijo { color: #c0392b; font-weight: 700; }

/* Los botones de la tarjeta: 44 px, que es lo que hace falta para acertar con guantes. */
.rec-accion {
  min-height: 44px;
  line-height: 44px;
  padding: 0 12px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   SUS FICHAJES, UNO A UNO (08/09/2026)

   Antes solo salían los totales del mes. Con cuatro números nadie puede comprobar sus horas:
   hay que ver qué día, dónde, y a qué hora entró y salió — y poder pedir que se corrija lo
   que esté mal.
   --------------------------------------------------------------------------- */
.horas-detalle {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.horas-detalle > b {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #555;
}

.fich-fila {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

/* Lo que cerró el sistema NO se da por bueno: se ve distinto porque es justo lo que hay que
   revisar, no una fila más. */
.fich-revisar {
  border-color: #e0b44a;
  background: var(--amarillo-suave);
}

.fich-cab {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.fich-cab span {
  color: #555;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fich-horas {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: #333;
}

.fich-aviso {
  margin-top: 6px;
  font-size: 12px;
  color: #8a6100;
}

.fich-pedir {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--gris-medio);
  cursor: pointer;
}

.fich-pedir:active {
  background: var(--gris-suave);
}

.fich-hecho {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #1b5e20;
}

.fich-error {
  color: var(--error);
  font-size: 13px;
  min-height: 18px;
  margin: 6px 0 0;
}

/* Los días, que se tocan para abrirlos. Marcados por fuera los que tienen algo que revisar:
   si no, habría que ir abriendo día por día para encontrar el que cerró el sistema. */
.dia-bloque {
  margin-bottom: 6px;
}

.dia-cab {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.dia-cab:active {
  background: var(--gris-suave);
}

.dia-revisar {
  border-color: #e0b44a;
  background: var(--amarillo-suave);
}

.dia-nombre small {
  color: var(--gris-medio);
  font-weight: normal;
}

.dia-datos {
  color: var(--gris-medio);
  text-align: right;
}

.dia-marca {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e0b44a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.dia-detalle {
  padding: 8px 0 2px 10px;
}

.dia-detalle[hidden] {
  display: none;
}

.fich-notas {
  margin-top: 5px;
  font-size: 12px;
  color: var(--gris-medio);
  font-style: italic;
}

/* EL LOGO EN EL PARTE DE JORNADA (09/09/2026).
   Sustituye al nombre escrito: el dibujo ya lo lleva dentro. Se deja `.jf-empresa` definido
   por si algún documento antiguo guardado lo sigue trayendo. */
.jf-logo { height: 52px; width: auto; display: block; margin-bottom: 4px; }
@media print { .jf-logo { height: 44px; } }

/* ---------------------------------------------------------------------------
   LA RUTA EN EL MÓVIL: la orden entera, el buscador y lo ya hecho (10/09/2026)
   --------------------------------------------------------------------------- */

/* Lo que hace falta para hacer el trabajo, dentro de la tarjeta. Fondo propio para que se
   lea como un bloque aparte de los datos del cliente, sin parecer otra tarjeta. */
.rec-orden {
  margin-top: 8px;
  padding: 8px 10px;
  background: #f8f8f8;
  border-radius: 6px;
  font-size: 13px;
}
.rec-orden-fila {
  display: flex;
  gap: 6px;
  padding: 2px 0;
}
.rec-orden-fila span {
  flex: 0 0 96px;
  color: #777;
}
/* Las llaves y el cartel: lo único que, si se olvida, obliga a volver. Por eso van arriba
   del bloque y en amarillo, no como una fila más. */
.rec-orden-aviso {
  font-weight: 700;
  padding: 4px 0;
  color: #92400e;
}
.rec-orden-obs {
  margin-top: 6px;
  white-space: pre-line;
  color: #444;
}

.rec-buscador {
  width: 100%;
  padding: 10px 12px;
  margin: 10px 0 4px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
}
.rec-resultados {
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}
/* ⚠️ Décima vez en este proyecto: una regla por clase gana al [hidden] del navegador, así
   que todo lo que se esconda con `hidden` y tenga su propio display necesita esta línea. */
.rec-resultados[hidden] { display: none; }
.rec-resultado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.rec-resultado:last-child { border-bottom: 0; }
.rec-resultado-txt { display: flex; flex-direction: column; min-width: 0; }
.rec-resultado-txt span { font-size: 12px; color: #777; }

/* El pie de «lo que ya has hecho». Discreto a propósito: está para poder comprobar, no para
   volver a mirarlo cada vez. */
.rec-hechos { margin: 14px 0 4px; text-align: center; }
.rec-hechos-btn {
  background: none;
  border: 0;
  color: #777;
  font-size: 13px;
  text-decoration: underline;
  padding: 6px;
}

/* «OJO: ESTE CLIENTE HA RECLAMADO» en la tarjeta de Hoy (13/09/2026). Pegado al nombre del
   cliente y en naranja: se tiene que ver al llegar al portal, con prisa y mala luz. Las
   instrucciones van a cuerpo 15, que es lo que hay que leer; el motivo, más pequeño. */
.emp-reclam {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: #fff4e5;
  border-left: 4px solid #d9480f;
  border-radius: 10px;
}
.emp-reclam-titulo { font-weight: 700; color: #b23c0a; font-size: 15px; margin-bottom: 4px; }
.emp-reclam-item + .emp-reclam-item {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #f0c49b;
}
.emp-reclam-motivo { font-size: 13px; color: #7a3d12; font-weight: 600; }
.emp-reclam-instr { font-size: 15px; color: #222; white-space: pre-line; margin-top: 2px; }