/* En el móvil los botones de la barra ocupan todo el ancho, en partes iguales (no se salen). En Solicitudes, las dos
   acciones (denegar / aprobar) lado a lado y "Cancelar" debajo, para que no se salgan ni a 320 px. */
@media (max-width: 575.98px) {
  .pp-barra-botones { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; }
  .pp-barra-botones .btn { padding: 8px 6px; font-size: 13px; }
  [data-barra-solicitudes] .pp-barra-botones { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-barra-solicitudes] [data-barra-cancelar] { grid-column: 1 / -1; order: 1; }
}
/* ==========================================================================
   WebPresenciaPin - hoja de estilos de la aplicación
   --------------------------------------------------------------------------
   Se apoya en Bootstrap 5.3 (bootstrap.min.css, cargado antes que este
   fichero) y define el aspecto propio de la web (el de la versión "Cloud").

   PARA CAMBIAR COLORES, TIPOGRAFÍA O REDONDEOS: modificar solo las variables
   de la sección 2 (:root). Todo lo demás se calcula a partir de ellas.

   Índice
     1. Fuentes
     2. Variables de diseño (tokens) y su traslado a Bootstrap
     3. Base
     4. Estructura: cabecera, menú lateral y contenido
     5. Componentes: encabezado de página, tarjetas, botones, formularios...
     6. Pantalla de acceso
     7. Inicio (dashboard)
     8. Consulta de tiempos
     9. Incidencias
     10. Solicitudes de permisos
     11. Documentos, tablón y avisos
     12. Cuadrante de solicitudes
     13. Marcajes de producción
     14. Impresión
   ========================================================================== */


/* 1. Fuentes ---------------------------------------------------------------
   Roboto servida desde el propio servidor (sin Google Fonts): funciona sin
   Internet y no comparte datos de los usuarios con terceros. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/roboto-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/roboto-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/roboto-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/roboto-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/roboto-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/roboto-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* 2. Variables de diseño ------------------------------------------------- */
:root {
  /* Marca */
  --pp-primario: #1B4B91;
  --pp-primario-rgb: 27, 75, 145;
  --pp-primario-oscuro: #123667;
  --pp-primario-suave: #E9F0FA;
  --pp-acento: #2F8F86;

  /* Superficies y texto */
  --pp-fondo: #F6F5F1;
  --pp-superficie: #FFFFFF;
  --pp-superficie-hover: #EFEDE6;
  --pp-borde: #E4E1D9;
  /* Borde de campos y casillas: al menos 3:1 sobre blanco y sobre el fondo (WCAG 1.4.11) */
  --pp-borde-campo: #858A93;
  --pp-borde-tabla: #EEF1F6;
  --pp-texto: #23272F;
  --pp-texto-suave: #63676F;

  /* Estados */
  --pp-exito: #1E7B34;
  --pp-exito-fondo: #E6F4EA;
  --pp-error: #B3413D;
  --pp-error-fuerte: #D0393E;
  --pp-error-fondo: #FBEAEA;
  --pp-aviso: #8A6100;
  --pp-aviso-fondo: #FFF4D6;
  --pp-notificacion: #DC2626;

  /* Forma */
  --pp-radio: 10px;
  --pp-radio-sm: 8px;
  --pp-sombra: 0 2px 10px rgba(20, 30, 50, .06);
  --pp-sombra-flotante: 0 8px 24px rgba(20, 30, 50, .14);
  --pp-fuente: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Estructura */
  --pp-alto-cabecera: 64px;
  --pp-ancho-menu: 240px;

  /* Traslado a Bootstrap: sus componentes usan así los mismos colores */
  --bs-primary: var(--pp-primario);
  --bs-primary-rgb: var(--pp-primario-rgb);
  --bs-body-font-family: var(--pp-fuente);
  --bs-body-color: var(--pp-texto);
  --bs-body-bg: var(--pp-fondo);
  --bs-secondary-color: var(--pp-texto-suave);
  --bs-border-color: var(--pp-borde);
  --bs-border-radius: var(--pp-radio-sm);
  --bs-border-radius-lg: var(--pp-radio);
  --bs-link-color: var(--pp-primario);
  --bs-link-color-rgb: var(--pp-primario-rgb);
  --bs-link-hover-color: var(--pp-primario-oscuro);
  --bs-focus-ring-color: rgba(var(--pp-primario-rgb), .18);
}


/* 3. Base ----------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Lo enfocado con el teclado no queda debajo de la cabecera fija al subir (WCAG 2.4.11) */
html { scroll-padding-top: calc(var(--pp-alto-cabecera) + 12px); }
body {
  background: var(--pp-fondo);
  color: var(--pp-texto);
  font-family: var(--pp-fuente);
  -webkit-tap-highlight-color: transparent;
}
a { font-weight: 500; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Iconos SVG del sprite /static/img/iconos.svg */
.icono { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.icono-sm { width: 16px; height: 16px; }
.icono-lg { width: 24px; height: 24px; }
.bandera { width: 20px; height: 14px; border-radius: 2px; flex-shrink: 0; vertical-align: middle; }

/* Enlace para saltar al contenido con teclado (accesibilidad) */
.pp-saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 2000;
  background: var(--pp-primario); color: #fff; padding: 8px 14px; border-radius: var(--pp-radio-sm);
}
.pp-saltar:focus { left: 8px; color: #fff; }
/* Foco con el teclado bien visible en todos los botones y opciones de menú (WCAG 2.4.7): el mismo contorno
   de 2 px que el resto de la web. Con el ratón o el dedo no sale (:focus-visible). */
.btn:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: 2px; box-shadow: none; }
.dropdown-item:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: -2px; }
/* Botones claros sobre la barra oscura de selección: contorno blanco */
.btn-light:focus-visible, .btn-outline-light:focus-visible { outline-color: #fff; }

/* Aviso de modo demostración */
.pp-demo {
  background: var(--pp-aviso-fondo); color: var(--pp-aviso);
  font-size: 12.5px; font-weight: 700; text-align: center; padding: 4px 12px;
  border-bottom: 1px solid #F1DFA6;
}


/* 4. Estructura ------------------------------------------------------------ */
.pp-cabecera {
  position: sticky; top: 0; z-index: 1030;
  height: var(--pp-alto-cabecera);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  background: var(--pp-superficie);
  border-bottom: 1px solid var(--pp-borde);
  box-shadow: 0 1px 3px rgba(20, 30, 50, .04);
}
.pp-logo img { height: 40px; width: auto; display: block; }
.pp-cabecera-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.pp-boton-menu {
  display: none;
  width: 42px; height: 42px; border-radius: var(--pp-radio-sm); border: 1px solid var(--pp-borde);
  background: var(--pp-superficie); color: var(--pp-texto);
  align-items: center; justify-content: center;
}
.pp-boton-redondo {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--pp-borde); border-radius: 999px;
  padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--pp-texto);
}
.pp-boton-redondo:hover, .pp-boton-redondo:focus-visible { background: var(--pp-fondo); }
.pp-boton-usuario { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; padding: 4px 6px; border-radius: var(--pp-radio); color: var(--pp-texto); }
.pp-boton-usuario:hover { background: var(--pp-fondo); }
.pp-boton-usuario .pp-nombre { font-size: 13.5px; font-weight: 600; }

.pp-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pp-primario); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}

.dropdown-menu { border-color: var(--pp-borde); border-radius: var(--pp-radio); box-shadow: var(--pp-sombra-flotante); padding: 6px; }
.dropdown-item { display: flex; align-items: center; gap: 9px; border-radius: 7px; font-size: 13.5px; padding: 8px 10px; }
.dropdown-item.active, .dropdown-item:active { background: var(--pp-primario-suave); color: var(--pp-primario-oscuro); font-weight: 700; }
.dropdown-item .icono { color: var(--pp-texto-suave); }
.dropdown-menu { --bs-dropdown-header-color: var(--pp-texto-suave); }
.pp-tema-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-width: 252px; padding: 2px 8px 6px; }
.pp-tema-opciones button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px; border: 1px solid var(--pp-borde); border-radius: var(--pp-radio-sm); background: transparent; color: var(--pp-texto); font-size: 11.5px; line-height: 1.15; text-align: center; hyphens: none; }
.pp-tema-opciones button .icono { width: 18px; height: 18px; color: var(--pp-texto-suave); }
.pp-tema-opciones button:hover { background: var(--pp-superficie-hover); }
.pp-tema-opciones button[aria-pressed="true"] { border-color: var(--pp-primario); background: var(--pp-primario-suave); color: var(--pp-primario-oscuro); font-weight: 700; }
.pp-tema-opciones button[aria-pressed="true"] .icono { color: var(--pp-primario); }
.pp-tema-opciones button:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: 2px; }

.pp-cuerpo { display: flex; min-height: calc(100vh - var(--pp-alto-cabecera)); }

/* Menú lateral: fijo en pantallas grandes, panel deslizante (offcanvas) en
   móvil y tableta. */
.pp-menu {
  width: var(--pp-ancho-menu); flex-shrink: 0;
  background: var(--pp-superficie);
  border-right: 1px solid var(--pp-borde);
}
.pp-menu .offcanvas-body { display: flex; flex-direction: column; padding: 0; }
@media (min-width: 992px) {
  /* El sticky va en el menú entero (hijo directo de .pp-cuerpo, que mide lo que la
     página): en .pp-menu-contenido no se quedaba quieto, porque su contenedor
     (.offcanvas-body) mide lo mismo que él, y al bajar se metía bajo la cabecera. */
  .pp-menu {
    position: sticky; top: var(--pp-alto-cabecera); align-self: flex-start;
    height: calc(100vh - var(--pp-alto-cabecera));
  }
  .pp-menu .offcanvas-body { height: 100%; }
  .pp-menu-contenido { height: 100%; display: flex; flex-direction: column; width: 100%; }
}
.pp-menu-lista { flex: 1; overflow-y: auto; padding: 14px 0; }
.pp-menu-grupo {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pp-texto-suave); padding: 16px 20px 6px;
}
.pp-menu-enlace {
  display: flex; align-items: center; gap: 11px;
  margin: 1px 10px; padding: 9px 12px;
  border-radius: var(--pp-radio-sm); border-left: 3px solid transparent;
  color: var(--pp-texto); font-size: 14px; font-weight: 500;
}
.pp-menu-enlace .icono { opacity: .75; }
.pp-menu-enlace:hover { background: var(--pp-superficie-hover); text-decoration: none; color: var(--pp-texto); }
.pp-menu-enlace.active {
  background: var(--pp-primario-suave); border-left-color: var(--pp-primario);
  color: var(--pp-primario-oscuro); font-weight: 700;
}
.pp-menu-enlace.active .icono { opacity: 1; }
.pp-menu-pie { border-top: 1px solid var(--pp-borde); padding: 8px 0; }
.pp-menu-pie .pp-menu-enlace { font-size: 13px; color: var(--pp-texto-suave); padding: 7px 12px; }
.pp-menu-pie form { margin: 0; }
.pp-menu-pie button.pp-menu-enlace { width: calc(100% - 20px); background: none; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; }
.pp-usuario {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--pp-borde);
}
.pp-usuario .pp-nombre { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.pp-usuario .pp-rol { font-size: 11.5px; color: var(--pp-texto-suave); }

.pp-contenido { flex: 1; min-width: 0; padding: 24px 24px 64px; }
.pp-contenido > .pp-pagina { max-width: 1200px; }

@media (max-width: 991.98px) {
  .pp-boton-menu { display: inline-flex; }
  .pp-cabecera { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .pp-logo img { height: 32px; }
  .pp-menu { width: min(300px, 85vw); }
  .pp-contenido { padding: 18px 14px 56px; }
}
@media (max-width: 575.98px) {
  .pp-boton-usuario .pp-nombre, .pp-idioma-texto { display: none; }
  /* En el acceso sí cabe: el código del idioma junto a la bandera (las banderas solas no identifican bien el idioma) */
  .pp-acceso-idiomas .pp-idioma-texto { display: inline; }
}
/* Idiomas en el menú del usuario solo en móviles estrechos; allí el selector de la barra se oculta para que la barra
   quepa en 320 px sin desplazamiento lateral (WCAG 1.4.10) */
.pp-idioma-en-menu { display: none; }
@media (max-width: 399.98px) {
  .pp-idioma-cabecera { display: none; }
  .pp-idioma-en-menu { display: list-item; }
}
/* Pantallas táctiles: botones de la barra, el ojo de la contraseña y el idioma del acceso a 44 px (zona de toque
   recomendada). Con ratón no cambia nada. Por debajo de 360 px el logo se reduce para que la barra siga cabiendo. */
@media (pointer: coarse) {
  .pp-boton-redondo, .pp-boton-menu, .pp-boton-usuario { min-height: 44px; min-width: 44px; justify-content: center; }
  .pp-ver-clave { width: 44px; height: 44px; right: 0; padding: 0; align-items: center; justify-content: center; }
  .pp-acceso-idiomas .pp-boton-redondo { padding: 6px 14px; }
}
@media (pointer: coarse) and (max-width: 359.98px) {
  .pp-logo img { height: 27px; }
}


/* 5. Componentes ------------------------------------------------------------ */

/* Encabezado de página: icono + título + descripción */
.pp-encabezado { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.pp-encabezado-icono {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--pp-primario-suave); color: var(--pp-primario);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pp-encabezado h1 { font-size: 20px; font-weight: 700; margin: 0; }
.pp-encabezado h1:focus { outline: none; }
.pp-encabezado p { font-size: 13.5px; color: var(--pp-texto-suave); margin: 2px 0 0; }
/* Móvil: el icono al lado del título (no solo en su línea), en las pantallas y en las ventanas de producción */
@media (max-width: 575.98px) {
  .pp-encabezado { flex-wrap: nowrap; align-items: flex-start; }
  .pp-encabezado > div { flex: 1 1 auto; min-width: 0; }
  .pp-encabezado-icono { flex-shrink: 0; }
}
.pp-encabezado-extra { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--pp-texto-suave); }

/* Tarjetas */
.pp-tarjeta {
  background: var(--pp-superficie); border: 1px solid var(--pp-borde);
  border-radius: var(--pp-radio); box-shadow: var(--pp-sombra);
}
.pp-tarjeta-cuerpo { padding: 20px; }
.pp-tarjeta-titulo {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: var(--pp-primario-oscuro);
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--pp-borde);
}
.pp-tarjeta-titulo .icono { color: var(--pp-primario); width: 18px; height: 18px; }
/* Más zona de toque sin cambiar cómo se ve (mínimo 24 px, WCAG 2.5.8) */
.pp-tarjeta-titulo .pp-enlace-titulo { margin: -6px -6px -6px auto; padding: 6px; font-size: 12.5px; font-weight: 700; }
.pp-tarjeta-pie { margin-top: auto; padding-top: 12px; font-size: 13px; }
/* Cabecera de tarjeta con un enlace o un control al lado del título (fuera del h2, para que no forme parte de él) */
.pp-tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--pp-borde); }
.pp-tarjeta-cab .pp-tarjeta-titulo { margin: 0; padding: 0; border: 0; }
.pp-tarjeta-cab .pp-enlace-titulo { margin: -6px -6px -6px auto; padding: 6px; font-size: 12.5px; font-weight: 700; }
/* Enlaces de texto de las tarjetas: más zona de toque sin cambiar cómo se ven */
.pp-tarjeta-pie > a:not(.btn), .pp-hoy-pie > a, a.pp-permisos-ver { display: inline-block; margin: -6px 0; padding: 6px 0; }
.pp-estrecho { max-width: 480px; }

/* Botones: mismos colores de marca para Bootstrap */
.btn { font-weight: 700; border-radius: var(--pp-radio-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary {
  --bs-btn-bg: var(--pp-primario); --bs-btn-border-color: var(--pp-primario);
  --bs-btn-hover-bg: var(--pp-primario-oscuro); --bs-btn-hover-border-color: var(--pp-primario-oscuro);
  --bs-btn-active-bg: var(--pp-primario-oscuro); --bs-btn-active-border-color: var(--pp-primario-oscuro);
  --bs-btn-disabled-bg: #B7C2D6; --bs-btn-disabled-border-color: #B7C2D6;
}
.btn-outline-primary {
  --bs-btn-color: var(--pp-primario); --bs-btn-border-color: var(--pp-primario);
  --bs-btn-hover-bg: var(--pp-primario); --bs-btn-hover-border-color: var(--pp-primario);
  --bs-btn-active-bg: var(--pp-primario-oscuro);
}
.btn-lg { min-height: 48px; font-size: 15px; }

/* Formularios. 16px en móvil: por debajo, iOS amplía la página al enfocar. */
.form-label { font-size: 13px; font-weight: 700; color: var(--pp-texto-suave); margin-bottom: 6px; }
.form-control, .form-select { border-color: var(--pp-borde-campo); min-height: 44px; font-size: 16px; }
.form-check-input { border-color: var(--pp-borde-campo); }
.form-control:focus, .form-select:focus { border-color: var(--pp-primario); box-shadow: 0 0 0 3px rgba(var(--pp-primario-rgb), .14); }
@media (min-width: 576px) { .form-control, .form-select { font-size: 15px; } }
.pp-campo-icono { position: relative; }
/* Marcaje del personal: incidencia y "Fichar" en la misma línea */
.pp-fichar-persona { display: flex; align-items: center; gap: 8px; }
.pp-fichar-persona .form-select { width: auto; min-width: 170px; min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
.pp-fichar-persona .btn { white-space: nowrap; min-height: 36px; }
/* Campo obligatorio vacío (data-validar-vacios): borde rojo y el mensaje debajo, con icono (no solo color) */
.form-control.pp-campo-error, .form-control.pp-campo-error:focus { border-color: var(--pp-error); }
.form-control.pp-campo-error:focus { box-shadow: 0 0 0 3px rgba(179, 65, 61, .15); }
.pp-error-campo { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--pp-error); font-size: 13px; font-weight: 600; }
.pp-error-campo .icono { width: 15px; height: 15px; flex-shrink: 0; }
/* Bloq Mayús activado (data-aviso-mayusculas): en ámbar, debajo del campo */
.pp-aviso-mayusculas { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--pp-aviso); font-size: 13px; font-weight: 600; }
.pp-aviso-mayusculas[hidden] { display: none; }
.pp-aviso-mayusculas .icono { width: 15px; height: 15px; flex-shrink: 0; }
.pp-campo-icono > .icono { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--pp-texto-suave); pointer-events: none; }
.pp-campo-icono > .form-control { padding-left: 42px; }
.pp-campo-icono > .form-control.pp-con-boton { padding-right: 46px; }
.pp-ver-clave {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px; color: var(--pp-texto-suave); display: flex;
}
.pp-ver-clave:hover { color: var(--pp-primario); }

/* Barra de filtros de las consultas (fechas + persona + botón) */
.pp-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px 20px; margin-bottom: 18px; }
.pp-filtros .pp-filtro { flex: 1 1 160px; min-width: 0; }
.pp-filtros .pp-filtro-ancho { flex: 2 1 260px; }
.pp-filtros .pp-filtro-mostrar { flex: 1.4 1 230px; }
/* Consultar incidencias: "Todas las incidencias" entero sin que "Consultar" baje de línea */
@media (min-width: 768px) {
  .pp-filtros-incidencias .pp-filtro-ancho { flex: 1 1 200px; }
  .pp-filtros-incidencias .pp-filtro-incidencia { flex: 0 0 195px; }
}
.pp-filtros .form-label { font-size: 11.5px; margin-bottom: 4px; }
@media (min-width: 576px) {
  .pp-filtros .form-control, .pp-filtros .form-select { min-height: 38px; font-size: 14px; padding-top: 6px; padding-bottom: 6px; }
  .pp-filtros .btn { min-height: 38px; }
}
@media (max-width: 575.98px) { .pp-filtros .btn { width: 100%; } }

/* Mensajes */
.alert { border-radius: var(--pp-radio-sm); font-size: 14px; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.alert-danger { background: var(--pp-error-fondo); border-color: #F1C6C4; color: var(--pp-error); }
/* Botones de borde rojo («Anular») y gris («Imprimir»): los tonos de Bootstrap no llegan a 4,5:1 sobre el fondo de
   la página; estos sí (rojo 5,1 y gris 5,6). También al pasar el ratón y al pulsar. */
.btn-outline-danger { --bs-btn-color: var(--pp-error); --bs-btn-border-color: var(--pp-error); --bs-btn-hover-bg: var(--pp-error); --bs-btn-hover-border-color: var(--pp-error); --bs-btn-active-bg: #9A3633; --bs-btn-active-border-color: #9A3633; --bs-btn-disabled-color: var(--pp-error); --bs-btn-disabled-border-color: var(--pp-error); }
.btn-outline-secondary { --bs-btn-color: #5C636A; --bs-btn-border-color: #5C636A; --bs-btn-hover-bg: #5C636A; --bs-btn-hover-border-color: #5C636A; --bs-btn-active-bg: #4D5358; --bs-btn-active-border-color: #4D5358; --bs-btn-disabled-color: #5C636A; --bs-btn-disabled-border-color: #5C636A; }
.alert-success { background: #EAF5F1; border-color: #BFE3D6; color: #1E6E52; }
.alert-info { background: var(--pp-primario-suave); border-color: #CBDAF0; color: var(--pp-primario-oscuro); }

/* Estado vacío */
.pp-vacio { text-align: center; color: var(--pp-texto-suave); padding: 36px 16px; font-size: 14px; }
.pp-vacio .icono { width: 36px; height: 36px; opacity: .5; margin-bottom: 8px; }

/* Insignias y chips */
.pp-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--pp-primario-suave); color: var(--pp-primario-oscuro);
  font-size: 12px; font-weight: 700;
}
.pp-estado { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--pp-exito-fondo); color: var(--pp-exito); font-size: 11px; font-weight: 700; }
.pp-contador-notificacion {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--pp-notificacion); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Valores con signo (saldos) */
.saldo-positivo { color: var(--pp-exito) !important; font-weight: 700; }
/* Saldo en contra: el rojo de los avisos (--pp-error), que llega a 4,5:1 también sobre los fondos de color
   (Totales, subtotal de semana, título de semana del móvil); el rojo más claro no llegaba (WCAG 1.4.3) */
.saldo-negativo, .negativo { color: var(--pp-error) !important; font-weight: 700; }
.saldo-cero { color: var(--pp-texto-suave) !important; }

/* Tablas */
.pp-tabla-contenedor {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--pp-radio);
}
.pp-tabla-contenedor.pp-alta { max-height: 70vh; overflow-y: auto; }
/* Tabla con desplazamiento propio: se llega con el tabulador y se recorre con las flechas (WCAG 2.1.1) */
.pp-tabla-contenedor[tabindex]:focus-visible, .pp-cuadrante-contenedor[tabindex]:focus-visible, .pp-cf-lista[tabindex]:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: 2px; }
.pp-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; margin: 0; }
.pp-tabla th {
  position: sticky; top: 0; z-index: 1;
  background: #F4F6FA; color: var(--pp-texto-suave);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 11px 12px; border-bottom: 1px solid #DCE2EC; text-align: left; white-space: nowrap;
}
.pp-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--pp-borde-tabla); vertical-align: middle; background: var(--pp-superficie); }
.pp-tabla td.pp-num, .pp-tabla th.pp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Tabla centrada: cabecera y datos (por ahora solo en Consultar tiempos) */
.pp-tabla.pp-tabla-centrada th, .pp-tabla.pp-tabla-centrada td { text-align: center; }
.pp-tabla td.pp-hora { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Resultado del marcaje (pantalla de marcaje): tick verde si se ha registrado bien */
.pp-aviso-marcaje { display: flex; align-items: center; gap: 8px; }
.pp-aviso-marcaje .icono { flex-shrink: 0; }
/* Aviso al que app.js lleva el foco tras fichar o anular desde la tabla del personal */
[data-foco-al-cargar]:focus { outline: 3px solid var(--pp-primario); outline-offset: 2px; }
.pp-tick { color: var(--pp-exito); }
/* Resultado del marcaje debajo del nombre, en la tabla del personal */
.pp-tabla .pp-aviso-fila { margin: 6px 0 0; padding: 4px 8px; font-size: 12px; font-weight: 600; gap: 6px; }
.pp-tabla .pp-aviso-fila .icono { width: 16px; height: 16px; }
.pp-tabla tbody tr:hover td { background: #FAFBFD; }
.pp-tabla tfoot td { background: var(--pp-primario-suave); font-weight: 700; color: var(--pp-primario-oscuro); border-bottom: 0; }
/* Cabecera de la fila de total (th scope=row): igual que el resto del pie, no como las cabeceras de columna */
.pp-tabla tfoot th { position: static; padding: 10px 12px; border-bottom: 0; background: var(--pp-primario-suave); color: var(--pp-primario-oscuro);
  font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; white-space: normal; }

/* Cargando */
.pp-girando { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: pp-girar .7s linear infinite; }
@keyframes pp-girar { to { transform: rotate(360deg); } }
.pp-girando-oscuro { border-color: var(--pp-primario-suave); border-top-color: var(--pp-primario); }
/* Consultar tiempos: tarjeta de cada persona de un grupo (su tabla llega después) */
.pp-tiempos-persona { margin-top: 18px; scroll-margin-top: 80px; }
.pp-tiempos-persona [data-cargar-cuerpo] > p, .pp-tiempos-persona [data-cargar-cuerpo] > .alert { margin: 16px 20px; }
.pp-cargando-tiempos { display: flex; align-items: center; gap: 10px; color: var(--pp-texto-suave); font-size: 14px; }


/* 6. Pantalla de acceso ------------------------------------------------------ */
.pp-acceso {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.pp-acceso-caja { width: 100%; max-width: 400px; overflow: hidden; }
.pp-acceso-logo { text-align: center; padding: 26px 32px 20px; border-bottom: 1px solid var(--pp-borde); }
.pp-acceso-logo img { height: 54px; width: auto; }
.pp-acceso-cuerpo { padding: 28px 32px 32px; }
.pp-acceso-cuerpo h1 { font-size: 15px; font-weight: 700; margin: 0 0 20px; }
/* "¿Has olvidado tu contraseña?" bajo el botón de entrar: discreto, sin competir con él */
.pp-acceso-ayuda { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--pp-texto-suave); text-align: center; }
.pp-acceso-ayuda strong { color: var(--pp-texto); }
.pp-acceso-idiomas { display: flex; justify-content: center; margin-top: 16px; }
@media (max-width: 420px) {
  .pp-acceso { padding: 14px; }
  .pp-acceso-logo { padding: 22px 20px 18px; }
  .pp-acceso-cuerpo { padding: 22px 20px 26px; }
}


/* 7. Inicio ------------------------------------------------------------------ */
.pp-panel { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.pp-panel > .pp-tarjeta { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; }
.pp-panel > .pp-tarjeta.pp-ancho-completo { flex-basis: 100%; }
/* Tarjeta con poco contenido (p. ej. Permisos sin límites): mide lo que necesita, sin estirarse a la altura de la vecina */
.pp-panel > .pp-tarjeta.pp-tarjeta-ajustada { align-self: flex-start; }
.pp-panel .pp-tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; }
@media (max-width: 767.98px) { .pp-panel > .pp-tarjeta { flex-basis: 100%; } }
/* En móvil y tablet, "Marcaje rápido" va el primero (en escritorio queda a la derecha de "Notificaciones") */
@media (max-width: 1199.98px) { .pp-panel > [aria-labelledby="titulo-fichaje"] { order: -1; } }

.pp-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 4px; }
.pp-cifra { background: var(--pp-fondo); border-radius: var(--pp-radio); padding: 12px 14px; min-width: 0; }
.pp-cifra-valor { font-size: 19px; font-weight: 700; color: var(--pp-primario-oscuro); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp-cifra-etiqueta { font-size: 11.5px; color: var(--pp-texto-suave); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.pp-cifra.positivo .pp-cifra-valor { color: #166534; }
.pp-cifra.negativo .pp-cifra-valor { color: #991B1B; }
/* Resumen del mes del inicio: dos cifras grandes y "Esta semana" (un día por casilla, cada uno enlaza a sus tiempos) */
.pp-mes-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pp-mes-cifra { min-width: 0; padding: 12px 14px; border-radius: var(--pp-radio-sm); background: var(--pp-fondo); }
.pp-mes-cifra strong { display: block; font-size: 26px; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--pp-texto); }
.pp-mes-cifra strong.positivo { color: var(--pp-exito); }
.pp-mes-cifra strong.negativo { color: var(--pp-error); }
.pp-mes-cifra > span { display: block; margin-top: 4px; font-size: 13px; color: var(--pp-texto-suave); }
.pp-semana-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--pp-texto); }
.pp-semana-cab b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pp-semana-cab b.positivo, .pp-semana-dia.positivo b { color: var(--pp-exito); }
.pp-semana-cab b.negativo, .pp-semana-dia.negativo b { color: var(--pp-error); }
.pp-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.pp-semana-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 52px; padding: 8px 2px; border-radius: 8px; background: var(--pp-fondo); font-size: 12px; color: var(--pp-texto-suave); text-decoration: none; }
a.pp-semana-dia:hover { background: var(--pp-superficie-hover); color: var(--pp-texto-suave); }
.pp-semana-dia b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pp-texto); white-space: nowrap; }
.pp-semana-dia.vacio b { font-weight: 400; color: var(--pp-texto-suave); }
.pp-semana-dia > span[aria-hidden] { color: var(--pp-texto-suave); }
.pp-semana-dia.hoy { outline: 2px solid var(--pp-primario); outline-offset: -2px; background: var(--pp-superficie); }
@media (max-width: 360px) { .pp-semana { gap: 2px; } .pp-semana-dia b { font-size: 11px; letter-spacing: -.02em; } }
.pp-punto { width: 7px; height: 7px; border-radius: 50%; background: #C9CED8; display: inline-block; }
.pp-punto-ok { background: #16A34A; }

/* Tarjeta de fichaje: estado de hoy (parciales/fichaje-hoy). Dentro: punto y fondo verdes */
.pp-hoy-estado { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--pp-radio-sm); background: var(--pp-fondo); }
.pp-hoy-estado.dentro { background: #EAF5F1; }
.pp-hoy-punto { flex-shrink: 0; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: #8A94A6; }
.pp-hoy-estado.dentro .pp-hoy-punto { background: #1E8A5E; box-shadow: 0 0 0 4px rgba(30, 138, 94, .18); }
/* Dentro: el punto late (un aro que sale y se desvanece); con movimiento reducido se queda el aro fijo */
@keyframes pp-latido { 0% { box-shadow: 0 0 0 0 rgba(30, 138, 94, .5); } 70% { box-shadow: 0 0 0 9px rgba(30, 138, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 138, 94, 0); } }
@media (prefers-reduced-motion: no-preference) { .pp-hoy-estado.dentro .pp-hoy-punto { animation: pp-latido 2s ease-out infinite; } }
.pp-hoy-estado strong { display: block; font-size: 17px; color: var(--pp-texto); }
.pp-hoy-fichajes { margin: 0 0 14px; font-size: 13.5px; color: var(--pp-texto-suave); }
.pp-hoy-fichajes > span { display: inline-block; white-space: nowrap; margin: 2px 4px 0 0; padding: 2px 8px; border-radius: 999px; background: var(--pp-fondo); color: var(--pp-texto); font-variant-numeric: tabular-nums; }
.pp-hoy-pie { margin-top: 12px; font-size: 13.5px; }


.pp-anuncio-inicio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-anuncio-inicio .pp-nuevo { margin-left: 0; }
/* Notificaciones de inicio: cada aviso es una franja redondeada; el margen negativo deja el texto alineado con el título */
.pp-avisos-tarjeta-lista .pp-aviso { padding-left: 10px; padding-right: 10px; margin: 0 -10px; border-radius: 8px; border-bottom: 0; }
.pp-avisos-tarjeta-lista .pp-aviso + .pp-aviso { margin-top: 2px; }
/* Sin notificaciones: una línea "Todo al día" en lugar de la tarjeta (el resto del inicio sube) */
.pp-panel > [hidden] { display: none !important; }
.pp-al-dia { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin: -4px 0; padding: 0 4px; font-size: 14px; color: var(--pp-texto-suave); }
.pp-al-dia .icono { flex-shrink: 0; width: 18px; height: 18px; color: var(--pp-exito); }
.pp-al-dia strong { font-weight: 600; color: var(--pp-texto); }
/* Franjas mientras cargan los avisos (mismo alto que una fila) */
.pp-aviso-esqueleto { display: block; height: 40px; margin: 0 -10px; border-radius: 8px; background: linear-gradient(90deg, var(--pp-fondo) 25%, var(--pp-superficie-hover) 50%, var(--pp-fondo) 75%); background-size: 200% 100%; }
.pp-aviso-esqueleto + .pp-aviso-esqueleto { margin-top: 2px; }
@keyframes pp-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: no-preference) { .pp-aviso-esqueleto { animation: pp-brillo 1.3s linear infinite; } }
/* Últimos anuncios de inicio: igual que las notificaciones */
.pp-anuncio-inicio.list-group-item { padding-left: 10px; padding-right: 10px; margin: 0 -10px; border-radius: 8px; border-bottom: 0; }
.pp-anuncio-inicio + .pp-anuncio-inicio { margin-top: 2px; }
/* Al abrirlo, "Nuevo" se desvanece (app.js) */
.pp-anuncio-inicio .pp-nuevo.saliendo { transition: opacity .3s, transform .3s; opacity: 0; transform: scale(.8); }
/* Móvil: el título a todo el ancho; "Nuevo" y la fecha, debajo */
@media (max-width: 575.98px) {
  .pp-anuncio-inicio { flex-wrap: wrap; row-gap: 4px; }
  .pp-anuncio-inicio .pp-enlace-texto { flex: 1 1 100%; }
  .pp-anuncio-inicio .pp-nuevo, .pp-anuncio-inicio small { margin-left: 0; }
  .pp-anuncio-inicio .pp-nuevo + small { margin-left: 6px; }
}
/* Tarjeta "Permisos" del inicio: cabecera con selector de año, aros de los límites y leyenda */
.pp-permisos-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--pp-borde); }
.pp-permisos-cab .pp-tarjeta-titulo { margin: 0; padding: 4px 0; border: 0; }
.pp-permisos-anio { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--pp-fondo); }
.pp-permisos-anio[hidden] { display: none; }
.pp-permisos-anio button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pp-primario); font-size: 20px; line-height: 1; }
.pp-permisos-anio button:hover { background: var(--pp-superficie-hover); }
.pp-permisos-anio button[hidden] { display: inline-flex; visibility: hidden; }
.pp-permisos-anio strong { min-width: 44px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--pp-texto); }
.pp-permisos-cuerpo { display: flex; align-items: center; gap: 20px; min-height: 136px; margin-bottom: 16px; transition: opacity .2s; }
.pp-permisos-cuerpo.cargando { opacity: .45; }
.pp-permisos-aros { flex: none; width: 136px; height: 136px; }
.pp-permisos-aros circle { fill: none; stroke-linecap: round; }
.pp-permisos-leyenda { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pp-permisos-leyenda li { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; align-items: baseline; }
.pp-permisos-punto { width: 10px; height: 10px; transform: translateY(1px); }
.pp-permisos-leyenda b { font-weight: 600; font-size: 14.5px; color: var(--pp-texto); overflow-wrap: anywhere; }
.pp-permisos-leyenda small { grid-column: 2; font-size: 13px; color: var(--pp-texto-suave); font-variant-numeric: tabular-nums; }
.pp-permisos-leyenda small.pasado { color: var(--pp-error); font-weight: 600; }
.pp-permisos-mensaje { flex: 1; margin: 0; color: var(--pp-texto-suave); font-size: 14px; }
.pp-permisos-fila { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 0 -10px; border-radius: 8px; background: var(--pp-fondo); color: var(--pp-texto); text-decoration: none; }
.pp-permisos-fila:hover { background: var(--pp-superficie-hover); color: var(--pp-texto); }
.pp-permisos-fila .icono { flex-shrink: 0; color: var(--pp-primario); }
.pp-permisos-fila small { display: block; font-size: 13px; color: var(--pp-texto-suave); }
.pp-permisos-fila b { font-weight: 600; font-size: 14.5px; }
.pp-permisos-flecha { margin-left: auto; color: var(--pp-texto-suave); font-size: 18px; }
.pp-permisos-pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; }
.pp-permisos-ver { margin-left: auto; font-weight: 600; }
@media (max-width: 380px) { .pp-permisos-cuerpo { gap: 14px; } .pp-permisos-aros { width: 112px; height: 112px; } }
/* Animación de los aros (app.js) y de la leyenda al cargar o cambiar de año */
@keyframes pp-aparecer-izq { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes pp-aros-entrada { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pp-permisos-aros .pp-aro { transition: stroke-dashoffset 1s cubic-bezier(.25, .8, .25, 1), opacity .2s ease; }
  .pp-permisos-aros.entrada { animation: pp-aros-entrada .45s ease-out both; transform-origin: center; }
  .pp-permisos-leyenda.entrada li { animation: pp-aparecer-izq .4s ease-out both; }
}
/* Al pasar el ratón por un nombre o un aro (o tocarlo en el móvil), solo ese queda con su color: ayuda a distinguir
   incidencias que comparten color en PresenciaPin (app.js pone .resaltando y .activo) */
.pp-permisos-cuerpo.resaltando .pp-permisos-aros circle { opacity: .15; }
.pp-permisos-cuerpo.resaltando .pp-permisos-aros circle.activo { opacity: 1; }
.pp-permisos-cuerpo.resaltando .pp-permisos-leyenda li { opacity: .45; }
.pp-permisos-cuerpo.resaltando .pp-permisos-leyenda li.activo { opacity: 1; }
.pp-permisos-leyenda li.con-aro { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .pp-permisos-aros circle, .pp-permisos-leyenda li { transition: opacity .2s ease; } }
/* Cargando otro año: los aros, en arco corto, giran hasta que llegan los datos (app.js pone velocidad y sentido) */
@keyframes pp-aro-girar { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: no-preference) {
  .pp-permisos-cuerpo.cargando { opacity: 1; }
  .pp-permisos-cuerpo .pp-permisos-leyenda { transition: opacity .2s; }
  .pp-permisos-cuerpo.cargando .pp-permisos-leyenda { opacity: .45; }
  .pp-permisos-cuerpo.cargando .pp-aro { animation: pp-aro-girar 1s linear infinite; transform-origin: 68px 68px; transition-duration: .35s; }
}

/* 8. Consulta de tiempos -------------------------------------------------------- */
/* Tabla por días de una persona: sin rayas verticales, solo una raya suave entre días, cabecera ligera y la
   fecha en dos líneas con el color del horario como franja a la izquierda (data-color-lateral, app.js) */
.pp-tiempos th, .pp-tiempos-varios th { background: var(--pp-superficie); color: var(--pp-texto-suave); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; padding: 12px; border-bottom: 1px solid var(--pp-borde); }
.pp-tiempos td { border-bottom: 0; }
.pp-tiempos tbody tr:has(> td.pp-fecha) > td { border-top: 1px solid var(--pp-borde-tabla); }
.pp-tiempos td.pp-hora { padding-top: 7px; padding-bottom: 7px; }
.pp-tiempos.pp-tabla-centrada th:first-child, .pp-tiempos.pp-tabla-centrada td.pp-fecha,
.pp-tiempos.pp-tabla-centrada tfoot td:first-child, .pp-tiempos.pp-tabla-centrada tr.pp-semana-total th { text-align: left; padding-left: 22px; }
.pp-tiempos td.pp-fecha { white-space: nowrap; }
.pp-tiempos .pp-fecha-dia { display: block; font-size: 12px; font-weight: 500; color: var(--pp-texto-suave); }
.pp-tiempos .pp-fecha-num { display: block; font-size: 15px; font-weight: 700; color: var(--pp-texto); }
.pp-tiempos tr.pp-hoy .pp-fecha-num { color: var(--pp-primario); }
.pp-tiempos tbody tr:hover td { background: inherit; }
/* Varias personas: el mismo estilo; nombres a la izquierda en negrita y tiempos centrados */
.pp-tiempos-varios td { border-bottom: 0; border-top: 1px solid var(--pp-borde-tabla); padding-top: 12px; padding-bottom: 12px; }
.pp-tiempos-varios.pp-tabla-centrada th:first-child, .pp-tiempos-varios.pp-tabla-centrada td:first-child { text-align: left; padding-left: 22px; }
.pp-tiempos-varios tbody td:first-child { font-weight: 600; color: var(--pp-texto); box-shadow: inset 5px 0 0 var(--pp-primario); }
/* El nombre lleva a sus tiempos (o a su ficha más abajo): se ve como texto y se subraya al pasar por encima */
.pp-tiempos-varios .pp-enlace-persona { color: inherit; text-decoration: none; display: inline-block; padding: 5px 0; margin: -5px 0; }
.pp-tiempos-varios .pp-enlace-persona:hover { color: var(--pp-primario); text-decoration: underline; }
/* Subtotal de cada semana: discreto, cada suma debajo de su columna */
.pp-tiempos tr.pp-semana-total td, .pp-tiempos tr.pp-semana-total th { position: static; text-transform: none; letter-spacing: 0; background: #F7F6F2; color: var(--pp-texto-suave); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-top: 1px solid var(--pp-borde); border-bottom: 1px solid var(--pp-borde); }
/* Fichaje sin salida (marcajes impares) */
/* Marcaje sin salida en un día pasado: en ámbar con icono. Hoy no falta nada: "ahora", en azul */
.pp-falta-marcaje { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid #F0D08A; border-radius: 6px; background: var(--pp-aviso-fondo); color: var(--pp-aviso); font-weight: 600; white-space: nowrap; }
.pp-en-curso { color: var(--pp-primario); font-weight: 600; }
/* Consulta de tiempos de una persona en el móvil: frases por semanas en vez de la tabla (parciales/tiempos-movil) */
.pp-tiempos-movil { display: none; }
/* Tiempos de una persona abiertos desde la lista de personas del móvil: volver a ella */
.pp-volver-lista { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 8px; font-weight: 600; text-decoration: none; }
.pp-volver-lista span { font-size: 22px; line-height: 1; }
/* "Solo en contra" / "Solo a favor": en la lista del móvil y en la cabecera de la tabla de varias personas */
.pp-tm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-tm-chip { min-height: 40px; padding: 6px 16px; border: 1px solid var(--pp-borde-campo); border-radius: 999px; background: var(--pp-superficie); color: var(--pp-texto); font-size: 14px; }
/* "Solo en contra" en rojo y "Solo a favor" en verde, como los saldos; pulsado: fondo suave, borde marcado y ✓ */
.pp-tm-chip[data-filtro-saldo="contra"] { border-color: #E6A9A6; color: var(--pp-error); font-weight: 600; }
.pp-tm-chip[data-filtro-saldo="favor"] { border-color: #9FD0AC; color: var(--pp-exito); font-weight: 600; }
.pp-tm-chip[aria-pressed="true"] { border-width: 2px; font-weight: 700; }
.pp-tm-chip[aria-pressed="true"]::before { content: "✓ "; }
.pp-tm-chip[data-filtro-saldo="contra"][aria-pressed="true"] { border-color: var(--pp-error); background: var(--pp-error-fondo); }
.pp-tm-chip[data-filtro-saldo="favor"][aria-pressed="true"] { border-color: var(--pp-exito); background: var(--pp-exito-fondo); }
.pp-resumen-informe .pp-tm-chips { margin-left: auto; }
.pp-resumen-informe .pp-tm-chip { min-height: 32px; padding: 4px 14px; font-size: 13px; }
/* Consulta de solicitudes: en el móvil una lista corta en lugar de la tabla (parciales/solicitudes-lista-movil) */
.pp-sol-movil { display: none; }
.pp-sol-lista { list-style: none; margin: 0; padding: 0; }
.pp-sol-grupo { margin: 0; padding: 10px 16px; background: var(--pp-fondo); border-bottom: 1px solid var(--pp-borde); font-size: 13px; font-weight: 700; color: var(--pp-texto); }
.pp-sol-lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; min-height: 64px; padding: 14px 16px; border-bottom: 1px solid var(--pp-borde); color: var(--pp-texto); text-decoration: none; }
.pp-sol-movil li:last-child > a { border-bottom: 0; }
.pp-sol-lista a:hover { background: var(--pp-superficie-hover); }
.pp-sol-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-sol-texto strong { font-size: 16px; }
.pp-sol-texto > span { font-size: 14.5px; color: var(--pp-texto); }
.pp-sol-texto .pp-sol-nombre { font-size: 13px; color: var(--pp-texto-suave); }
.pp-sol-texto .pp-sol-aprob { font-size: 13px; color: var(--pp-texto-suave); }
.pp-sol-flecha { font-size: 22px; line-height: 1; color: var(--pp-texto-suave); }
/* "Solo se muestran los permisos de 2026. Ver otro periodo": al final de la lista y en el aviso sin resultados */
.pp-sol-pie { margin: 0; padding: 14px 16px; border-top: 1px solid var(--pp-borde); font-size: 13.5px; color: var(--pp-texto-suave); }
.pp-enlace-boton { padding: 0; border: 0; vertical-align: baseline; font-size: inherit; font-weight: 600; color: var(--pp-primario); text-decoration: underline; }
/* Nueva solicitud: "Deja las horas en blanco si es para el día completo": cerca de las horas (8 px, en lugar del
   hueco normal de 16) y lejos de lo siguiente (24 px), para que se vea que es de las horas; en el ordenador empieza
   bajo "Desde hora" (offset-lg-3) */
.row > .pp-ayuda-horas { margin-top: 8px; margin-bottom: 8px; }
.pp-ayuda-horas p { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.pp-ayuda-horas .icono { flex-shrink: 0; margin-top: 2px; }
/* Edición de incidencias: aviso de fechas al revés u horas iguales (app.js, data-error-rango). En el ordenador, en una
   línea bajo la fila para no descolocar las casillas; en el móvil, justo bajo "Hasta". */
.pp-filtros > .pp-error-rango { flex-basis: 100%; margin-top: -6px; }
@media (min-width: 768px) { .pp-filtros > .pp-error-rango { order: 99; margin-top: -4px; } }
@media (min-width: 992px) { form.pp-alta-horas > .pp-error-rango { grid-column: 2 / 4; grid-row: 2; order: 0; margin: 0; } }
/* Fechas y horas con error en el móvil: sin el icono "!" de Bootstrap, que se montaba sobre el del teléfono */
@media (max-width: 767.98px), (pointer: coarse) {
  input:where([type=date], [type=time]).form-control.is-invalid { background-image: none; padding-right: .75rem; }
}
/* Edición de incidencias: tras añadir, franja verde bajo el botón ("Formación añadida · fechas"; en el móvil, las
   fechas en otra línea) y las filas nuevas se iluminan al aparecer en pantalla (app.js) */
.pp-alta-ok { display: flex; align-items: flex-start; gap: 8px; flex-basis: 100%; margin: 4px 0 0; padding: 9px 14px; border: 1px solid #B7DFC3; border-radius: var(--pp-radio); background: var(--pp-exito-fondo); color: var(--pp-exito); font-size: 14px; font-weight: 600; line-height: 1.4; }
.pp-alta-ok:focus { outline: none; }
.pp-alta-ok .icono { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.pp-alta-cuando::before { content: "· "; }
@media (max-width: 575.98px) { .pp-alta-cuando { display: block; } .pp-alta-cuando::before { content: none; } }
@media (min-width: 992px) { form.pp-alta-horas > .pp-alta-ok { grid-column: 1 / -1; } }
@keyframes pp-fila-nueva { 0%, 35% { background-color: var(--pp-primario-suave); } 100% { background-color: transparent; } }
.pp-tabla tr.pp-fila-nueva { animation: pp-fila-nueva 3.5s ease-out; }
.pp-tabla tr.pp-fila-nueva > td { background-color: transparent; }
@media (prefers-reduced-motion: reduce) { .pp-tabla tr.pp-fila-nueva { animation: none; background-color: var(--pp-primario-suave); } }
/* Edición de incidencias: si el supervisor añade a otra persona, "Para Ane Etxeberria Goñi" en una línea bajo el título */
.pp-titulo-con-para { display: flex; flex-direction: column; gap: 2px; }
.pp-alta-para { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--pp-texto); }
.pp-tarjeta-titulo .pp-alta-para .icono { width: 16px; height: 16px; }
/* Edición de incidencias por horas: la nota de los turnos de noche va bajo las horas y, si la hora hasta es menor que
   la hora desde, la marca "Día siguiente" sale de debajo de "Hora hasta" (0,22 s; sin animación con reducir
   movimiento). En el ordenador, rejilla: la marca bajo "Hora hasta" y la nota bajo las dos horas. */
.pp-ayuda-alta { display: flex; align-items: flex-start; gap: 6px; flex-basis: 100%; margin: -4px 0 4px; line-height: 1.4; }
.pp-ayuda-alta .icono { flex-shrink: 0; margin-top: 2px; }
.pp-dia-siguiente { flex-basis: 100%; display: grid; grid-template-rows: 0fr; margin-top: -12px; visibility: hidden; transition: grid-template-rows .22s ease-out, margin-top .22s ease-out, visibility 0s .22s; }
.pp-dia-siguiente > div { overflow: hidden; }
.pp-dia-siguiente span { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--pp-primario-suave); color: var(--pp-primario); font-size: 12px; font-weight: 700; line-height: 1.4; opacity: 0; transform: translateY(-8px); transition: opacity .22s ease-out, transform .22s ease-out; }
.pp-dia-siguiente.pp-visible { grid-template-rows: 1fr; margin-top: -6px; visibility: visible; transition: grid-template-rows .22s ease-out, margin-top .22s ease-out; }
.pp-dia-siguiente.pp-visible span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pp-dia-siguiente, .pp-dia-siguiente span { transition: none; } }
@media (min-width: 992px) {
  form.pp-alta-horas { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr auto; column-gap: 12px; row-gap: 6px; align-items: end; }
  form.pp-alta-horas .pp-dia-siguiente { grid-column: 3; grid-row: 2; margin: 0; }
  form.pp-alta-horas .pp-ayuda-alta { grid-column: 2 / 4; grid-row: 3; margin: 0; }
}
/* Móvil: "Solicitar permiso" a todo el ancho y 44 px, como los demás botones principales */
@media (max-width: 767.98px) { form[data-campos-incidencia] button[type=submit] { width: 100%; min-height: 44px; justify-content: center; } }
/* Móvil: algo menos de relleno en el campo de archivo para que "Ningún archivo" quepa entero */
@media (max-width: 575.98px) { .pp-archivo-boton, .pp-archivo-nombre { padding: 0 10px; } }
/* En el ordenador los filtros están siempre a la vista: "Ver otro periodo" sobra */
@media (min-width: 768px) { [data-abrir-filtros] { display: none; } }
@media (max-width: 767.98px) {
  .pp-tabla-contenedor.pp-sol-escritorio { display: none; }
  .pp-sol-movil { display: block; }
}
/* Franja de los filtros plegados (app.js): solo en el móvil */
.pp-filtros-plegados { display: none; }
@media (max-width: 767.98px) {
  .pp-tabla-contenedor.pp-tiempos-escritorio { display: none; }
  .pp-tiempos-movil { display: block; }
  .pp-solo-escritorio { display: none !important; }
  /* Varias personas: la lista sustituye a la tabla y al detalle de cada una (se abre al tocarla) */
  .pp-tiempos-persona { display: none; }
  .pp-tm-personas { margin-bottom: 8px; font-size: 13px; color: var(--pp-texto-suave); }
  .pp-tm-chips { margin-top: 14px; }
  .pp-tm-personas-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pp-borde); }
  .pp-tm-personas-lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--pp-borde); color: var(--pp-texto); text-decoration: none; }
  .pp-tm-personas-lista a:hover { background: var(--pp-superficie-hover); }
  .pp-tm-pnombre { font-size: 16px; font-weight: 700; }
  .pp-tm-flecha { font-size: 22px; color: var(--pp-borde-campo); }
  form.pp-filtros.pp-plegado { display: none; }
  .pp-filtros-plegados { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); background: var(--pp-superficie); box-shadow: var(--pp-sombra); color: var(--pp-texto); font: inherit; text-align: left; cursor: pointer; }
  .pp-filtros-plegados[hidden] { display: none; }
  .pp-filtros-plegados:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: 2px; }
  .pp-fp-texto strong { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
  .pp-fp-texto span { display: block; font-size: 13px; color: var(--pp-texto-suave); }
  .pp-fp-boton { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--pp-primario); border-radius: var(--pp-radio-sm); color: var(--pp-primario); font-size: 14px; font-weight: 600; }
}
.pp-tm-resumen { padding: 14px 16px 16px; border-bottom: 1px solid var(--pp-borde); }
.pp-tm-semana-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; padding: 10px 16px; background: var(--pp-fondo); font-size: 13px; font-weight: 700; color: var(--pp-texto); }
.pp-tm-dias { list-style: none; margin: 0; padding: 0; }
.pp-tm-dia { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 16px 10px 14px; border-bottom: 1px solid var(--pp-borde); }
.pp-tm-nombre { font-size: 16px; font-weight: 700; }
.pp-tm-tramos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; font-size: 15px; font-variant-numeric: tabular-nums; }
.pp-tm-incidencia { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--pp-primario); }
.pp-tm-detalle { font-weight: 400; color: var(--pp-texto-suave); }
.pp-tm-incidencia .pp-estado { margin-left: 6px; }
.pp-tm-trabajado { margin-top: 2px; font-size: 13px; color: var(--pp-texto-suave); }
.pp-tm-saldo-dia { align-self: center; text-align: right; }
/* "Ver contadores" (plegado): todos los contadores del periodo o del día */
.pp-tm-contadores { margin-top: 6px; }
.pp-tm-contadores > summary { display: inline-flex; align-items: center; min-height: 28px; font-size: 13px; font-weight: 600; color: var(--pp-primario); cursor: pointer; }
.pp-tm-contadores > summary { list-style: none; }
.pp-tm-contadores > summary::-webkit-details-marker { display: none; }
.pp-tm-contadores > summary::before { content: "▸"; margin-right: 6px; }
.pp-tm-contadores[open] > summary::before { content: "▾"; }
.pp-tm-contadores > summary:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: 2px; border-radius: 4px; }
/* Pantallas táctiles: zona de toque de 44 px sin que el día ocupe más (se extiende sobre el margen que ya hay) */
@media (pointer: coarse) {
  .pp-tm-contadores > summary { min-height: 44px; margin: -8px 0 -8px -4px; padding: 0 12px 0 4px; }
}
/* Totales del periodo, siempre a la vista: se reparten el ancho según cuántos haya (1, 2 por fila; el que sobra, a todo el ancho) */
.pp-tm-cifras { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-tm-cifra { flex: 1 1 130px; min-width: 0; padding: 8px 10px; border: 1px solid var(--pp-borde); border-radius: var(--pp-radio-sm); background: var(--pp-fondo); }
.pp-tm-cifra strong { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.pp-tm-cifra span { font-size: 12px; color: var(--pp-texto-suave); }
/* El contador de totalización: primero, a todo el ancho, cifra algo mayor y, si es calculado, en verde o rojo */
.pp-tm-cifra-principal { flex-basis: 100%; }
.pp-tm-cifra-principal strong { font-size: 20px; }
.pp-tm-saldo-positivo { border-color: #B9DEC3; background: var(--pp-exito-fondo); color: var(--pp-exito); }
.pp-tm-saldo-negativo { border-color: #EFC2C0; background: var(--pp-error-fondo); color: var(--pp-error); }
.pp-tm-saldo-positivo span, .pp-tm-saldo-negativo span { color: inherit; font-weight: 600; }
.pp-tm-lista { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 14px; row-gap: 2px; margin: 4px 0 0; font-size: 13px; }
.pp-tm-lista dt { font-weight: 400; color: var(--pp-texto-suave); }
.pp-tm-lista dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-tm-saldo-dia strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.pp-tm-saldo-dia span { font-size: 12px; color: var(--pp-texto-suave); }
.pp-incidencia-detalle { margin-top: 3px; font-size: 12px; color: var(--pp-texto-suave); }
.pp-resumen-informe { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--pp-borde); font-size: 13px; color: var(--pp-texto-suave); }
.pp-resumen-informe strong { color: var(--pp-texto); }
/* Cabecera de cada ficha del departamento: es un título (para saltar de una persona a otra con el lector) pero se ve igual */
.pp-titulo-ficha { margin: 0; font-weight: 400; line-height: inherit; }
@media (max-width: 575.98px) {
  .pp-tabla { font-size: 12px; }
  .pp-tabla td, .pp-tabla th { padding: 8px 8px; }
}


/* 9. Incidencias (consulta y edición) ---------------------------------------------- */
.pp-filtros-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pp-filtros-extra .badge { margin-left: 6px; font-size: 11px; }
/* Consultar tiempos: filtros avanzados y descarga en la misma fila (la descarga a la derecha); sin ninguno, nada */
.pp-filtros-acciones { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-filtros-acciones .pp-filtros-extra { flex-basis: auto; }
.pp-filtros-acciones > .dropdown { margin-left: auto; }
.pp-filtros-acciones:not(:has(*)) { display: none; }
@media (max-width: 575.98px) {
  /* Móvil: uno debajo del otro y a todo el ancho, como Consultar */
  .pp-filtros-acciones > *, .pp-filtros-acciones .pp-filtros-extra { flex: 1 1 100%; }
  .pp-filtros-acciones > .dropdown { margin-left: 0; }
}
.pp-ayuda { font-size: 12.5px; color: var(--pp-texto-suave); }
.pp-texto-suave { font-size: 14px; color: var(--pp-texto-suave); }
.pp-subtitulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pp-texto-suave); margin: 4px 0 8px; }
.pp-casillas { border: 0; padding: 0; margin: 0 0 18px; }
.pp-casillas:last-child { margin-bottom: 0; }
.pp-casillas legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--pp-texto-suave); margin-bottom: 8px; }
.pp-casillas .form-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; margin: 0; font-size: 14.5px; }
.pp-casillas .form-check-input { margin: 0; flex-shrink: 0; width: 18px; height: 18px; }
.pp-pestanas { border-bottom-color: var(--pp-borde); }
.pp-pestanas .nav-link { color: var(--pp-texto-suave); font-weight: 500; font-size: 14px; }
.pp-pestanas .nav-link.active { color: var(--pp-primario); font-weight: 700; background: var(--pp-superficie); }
/* Pestañas con texto corto en el móvil (Solicitudes): una sola fila, las tres del mismo ancho y 44 px de alto */
.pp-pestana-corta { display: none; }
@media (max-width: 767.98px) {
  .pp-pestanas-cortas { flex-wrap: nowrap; }
  .pp-pestanas-cortas .nav-item { flex: 1 1 0; min-width: 0; }
  .pp-pestanas-cortas .nav-link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 4px; text-align: center; }
  .pp-pestanas-cortas .pp-pestana-larga { display: none; }
  .pp-pestanas-cortas .pp-pestana-corta { display: inline; }
}

/* Disponibilidad: una tarjeta por incidencia con límite */
.pp-limites { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.pp-limite { border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); padding: 14px 16px; background: var(--pp-superficie); min-width: 0; }
.pp-limite-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pp-limite-nombre { font-size: 15px; font-weight: 700; margin: 0; color: var(--pp-texto); overflow-wrap: anywhere; }
.pp-limite-periodo { font-size: 12px; color: var(--pp-texto-suave); margin-top: 2px; }
.pp-limite-estado { flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--pp-exito-fondo); color: var(--pp-exito); }
.pp-limite.alto .pp-limite-estado { background: var(--pp-aviso-fondo); color: var(--pp-aviso); }
.pp-limite.agotada .pp-limite-estado, .pp-limite.sobrepasada .pp-limite-estado { background: var(--pp-error-fondo); color: var(--pp-error); }
.pp-limite-barra { display: block; width: 100%; height: 8px; margin-bottom: 14px; border: 0; border-radius: 999px; background: #E9EDF3; overflow: hidden; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.pp-limite-barra::-webkit-meter-bar { background: #E9EDF3; border: 0; border-radius: 999px; height: 8px; }
.pp-limite-barra::-webkit-meter-optimum-value { background: #2E9E5B; border-radius: 999px; }
.pp-limite-barra::-webkit-meter-suboptimum-value { background: #E0A100; border-radius: 999px; }
.pp-limite-barra::-webkit-meter-even-less-good-value { background: var(--pp-error-fuerte); border-radius: 999px; }
.pp-limite-barra:-moz-meter-optimum::-moz-meter-bar { background: #2E9E5B; }
.pp-limite-barra:-moz-meter-sub-optimum::-moz-meter-bar { background: #E0A100; }
.pp-limite-barra:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--pp-error-fuerte); }
/* Con el color de la incidencia (app.js lo pasa de data-color-incidencia a las variables): la barra va de ese color y solo
   se pone roja si se pasa del límite; el estado (disponible, agotada...) lo dice la etiqueta */
.pp-limite-barra.con-color { background: var(--pp-color-barra-fondo); }
.pp-limite-barra.con-color::-webkit-meter-bar { background: var(--pp-color-barra-fondo); }
.pp-limite-barra.con-color::-webkit-meter-optimum-value, .pp-limite-barra.con-color::-webkit-meter-suboptimum-value, .pp-limite-barra.con-color::-webkit-meter-even-less-good-value { background: var(--pp-color-barra); }
.pp-limite-barra.con-color::-moz-meter-bar { background: var(--pp-color-barra); }
.pp-limite.sobrepasada .pp-limite-barra.con-color::-webkit-meter-even-less-good-value { background: var(--pp-error-fuerte); }
.pp-limite.sobrepasada .pp-limite-barra.con-color::-moz-meter-bar { background: var(--pp-error-fuerte); }
.pp-limite-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.pp-limite-cifras > div { display: flex; flex-direction: column-reverse; background: var(--pp-fondo); border-radius: var(--pp-radio-sm); padding: 9px 6px; text-align: center; min-width: 0; }
.pp-limite-cifras dt { font-size: 10.5px; font-weight: 500; color: var(--pp-texto-suave); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.pp-limite-cifras dd { font-size: 15px; font-weight: 700; color: var(--pp-texto); margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pp-limite.sobrepasada .pp-limite-restante dd, .pp-limite.agotada .pp-limite-restante dd { color: var(--pp-error-fuerte); }
.pp-limite-nota { font-size: 12.5px; color: var(--pp-texto-suave); white-space: pre-line; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--pp-borde); }
.pp-limite-cabecera + .pp-limite-nota { margin-top: 0; padding-top: 0; border-top: 0; }

/* Por incidencia: un desplegable (<details>) por tipo, con su detalle */
.pp-tipos-incidencia { display: flex; flex-direction: column; gap: 10px; }
.pp-tipo-incidencia { border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); background: var(--pp-superficie); transition: border-color .15s ease, box-shadow .15s ease; }
.pp-tipo-incidencia:hover, .pp-tipo-incidencia[open] { border-color: var(--pp-primario); box-shadow: var(--pp-sombra); }
.pp-tipo-incidencia > summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.pp-tipo-incidencia > summary::-webkit-details-marker { display: none; }
.pp-tipo-incidencia > summary:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: 2px; border-radius: var(--pp-radio); }
.pp-tipo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-tipo-nombre { font-size: 15px; font-weight: 700; color: var(--pp-texto); overflow-wrap: anywhere; }
/* Periodo de los límites: el corto solo en la disponibilidad compacta del móvil */
.pp-periodo-corto { display: none; }
/* Consultar incidencias en el móvil: disponibilidad compacta (una fila por incidencia, sin tarjetas) */
@media (max-width: 575.98px) {
  .pp-disp-compacta .pp-limites { gap: 0; }
  .pp-disp-compacta .pp-limite { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nombre estado" "barra barra" "cifras cifras" "nota nota";
    gap: 6px 8px; align-items: center; padding: 12px 0; border: 0; border-bottom: 1px solid var(--pp-borde); border-radius: 0; box-shadow: none; }
  .pp-disp-compacta .pp-limite:first-child { padding-top: 0; }
  .pp-disp-compacta .pp-limite:last-child { padding-bottom: 0; border-bottom: 0; }
  .pp-disp-compacta .pp-limite-cabecera { display: contents; }
  .pp-disp-compacta .pp-limite-cabecera > div { grid-area: nombre; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .pp-disp-compacta .pp-limite-periodo { margin: 0; font-size: 12px; }
  .pp-disp-compacta .pp-periodo-largo { display: none; }
  .pp-disp-compacta .pp-periodo-corto { display: inline; }
  .pp-disp-compacta .pp-limite-estado { grid-area: estado; }
  .pp-disp-compacta .pp-limite-barra { grid-area: barra; margin: 0; }
  .pp-disp-compacta .pp-limite-cifras { grid-area: cifras; display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; }
  .pp-disp-compacta .pp-limite-cifras > div { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 4px; min-height: 0; padding: 0; background: none; }
  .pp-disp-compacta .pp-limite-cifras dd { margin: 0; font-size: 15px; white-space: nowrap; }
  .pp-disp-compacta .pp-limite-cifras dt { font-size: 11px; font-weight: 500; text-transform: lowercase; white-space: nowrap; }
  .pp-disp-compacta .pp-limite-nota { grid-area: nota; margin: 0; padding-top: 0; border-top: 0; font-size: 12px; }
}
/* Qué es el número de cada incidencia (una vez, bajo el título) */
.pp-leyenda-incidencias { margin: -4px 0 12px; font-size: 13px; color: var(--pp-texto-suave); }
.pp-leyenda-incidencias.pp-leyenda-suelta { margin: 2px 4px 12px; }
.pp-tipo-cuenta { flex-shrink: 0; min-width: 34px; text-align: center; background: var(--pp-primario-suave); color: var(--pp-primario-oscuro); font-size: 15px; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
.pp-tipo-flecha { flex-shrink: 0; color: var(--pp-texto-suave); transition: transform .15s ease; }
.pp-tipo-incidencia[open] .pp-tipo-flecha { transform: rotate(180deg); }
.pp-tipo-detalle { padding: 4px 16px 16px; }
@media (max-width: 575.98px) {
  .pp-tipo-incidencia > summary { gap: 10px; padding: 12px; }
  .pp-tipo-detalle { padding: 4px 10px 12px; }
}


/* 10. Solicitudes de permisos ------------------------------------------------------ */
.pp-texto-pre { white-space: pre-line; font-size: 14px; overflow-wrap: anywhere; }
.pp-info-titulo { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.modal .pp-limites { grid-template-columns: 1fr; }
.pp-estados { border: 0; margin: 0; padding: 0; min-width: 0; }
.pp-estados legend { float: none; width: auto; font-size: 11.5px; font-weight: 500; margin-bottom: 6px; }
.pp-estados .form-check { font-size: 13.5px; margin-bottom: 0; }

/* Estado de la solicitud y aprobaciones (mismos colores que la web anterior) */
.pp-estado-solicitud { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; background: var(--pp-fondo); color: var(--pp-texto-suave); }
.pp-estado-solicitud.pendiente { background: var(--pp-aviso-fondo); color: var(--pp-aviso); }
.pp-estado-solicitud.aprobada { background: var(--pp-exito-fondo); color: var(--pp-exito); }
/* Rojo de texto sobre fondo rosado: --pp-error (4,8:1); el --pp-error-fuerte no llegaba a 4,5 (WCAG 1.4.3) */
.pp-estado-solicitud.denegada { background: var(--pp-error-fondo); color: var(--pp-error); }
.pp-estado-solicitud.anulacion { background: #F1E8FB; color: #6B3FA0; }
.pp-aprobaciones { display: inline-block; padding: 2px 8px; border-radius: var(--pp-radio-sm); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pp-aprobaciones.ninguna { background: var(--pp-error-fondo); color: var(--pp-error); }
.pp-aprobaciones.mia { background: var(--pp-exito-fondo); color: var(--pp-exito); }
.pp-aprobaciones.otras { background: var(--pp-aviso-fondo); color: var(--pp-aviso); }
.pp-botones, .pp-solicitud-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-botones form, .pp-solicitud-acciones form { margin: 0; }
.pp-solicitudes td.pp-nombre { min-width: 150px; }
.pp-solicitudes td.pp-acciones { min-width: 96px; }
/* Clip de "tiene documentos adjuntos" junto al código (tabla) o a la incidencia (lista del móvil) */
.pp-sol-codigo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Incidencia con el clip de documentos adjuntos a su derecha (como en la lista del móvil) */
.pp-sol-incidencia { display: inline-flex; align-items: center; gap: 6px; }
.pp-adjunto { display: inline-flex; align-items: center; color: var(--pp-primario); vertical-align: middle; }
.pp-adjunto .icono { width: 17px; height: 17px; }
/* Clip y bocadillo juntos: un poco de aire entre los dos */
.pp-adjunto + .pp-adjunto { margin-inline-start: 4px; }
.pp-marcas { white-space: nowrap; }
/* Novedades sin ver (cambio de estado, observación, documento): punto de color tras el clip y el bocadillo */
.pp-novedad { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pp-error-fuerte);
  vertical-align: middle; margin-inline-start: 6px; }
/* Motivo al denegar, en las confirmaciones */
.pp-motivo { margin-bottom: 16px; text-align: left; }
.pp-motivo .form-label { font-size: 14px; font-weight: 600; }
/* Dato secundario debajo del principal: el departamento bajo el nombre, "1 de 2 aprobaciones" bajo el estado */
.pp-nowrap { white-space: nowrap; }
.pp-sol-sub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--pp-texto-suave); }
/* Aprobar (visto verde) y denegar (aspa roja) en la fila: botones de icono de 36 × 32 px */
.pp-accion-icono { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; border: 1px solid; background: var(--pp-superficie); }
.pp-accion-icono .icono { width: 18px; height: 18px; }
.pp-accion-aprobar { color: var(--pp-exito); border-color: var(--pp-exito); }
.pp-accion-aprobar:hover, .pp-accion-aprobar:focus-visible { color: var(--pp-exito); border-color: var(--pp-exito); background: var(--pp-exito-fondo); }
.pp-accion-denegar { color: var(--pp-error); border-color: var(--pp-error); }
.pp-accion-denegar:hover, .pp-accion-denegar:focus-visible { color: var(--pp-error); border-color: var(--pp-error); background: var(--pp-error-fondo); }
/* Ordenador: el mismo diseño que las tablas de Consultar tiempos (cabecera ligera, raya suave entre filas y franja
   azul a la izquierda). En el móvil la tabla se ve como tarjetas (.pp-tabla-tarjetas) o como lista. */
@media (min-width: 768px) {
  .pp-solicitudes th, .pp-documentos-tabla th { background: var(--pp-superficie); color: var(--pp-texto-suave); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; padding: 12px; border-bottom: 1px solid var(--pp-borde); }
  .pp-solicitudes td, .pp-documentos-tabla td { border-bottom: 0; border-top: 1px solid var(--pp-borde-tabla); }
  .pp-solicitudes th:first-child, .pp-solicitudes td:first-child,
  .pp-documentos-tabla th:first-child, .pp-documentos-tabla td:first-child { padding-left: 22px; }
  .pp-solicitudes tbody td:first-child, .pp-documentos-tabla tbody td:first-child { box-shadow: inset 5px 0 0 var(--pp-primario); }
}
/* Documentos: "Tipo · Fecha" bajo el nombre solo en el móvil (en el ordenador tienen su columna) */
.pp-documentos-tabla .pp-doc-movil { display: none; }
/* Documentos sin abrir arriba, en su grupo ("Sin abrir (2)" / "Ya abiertos"), con fondo azul suave */
.pp-documentos-tabla tr.pp-doc-grupo th { position: static; padding: 16px 12px 8px 22px; background: var(--pp-superficie); color: var(--pp-texto); font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; border-top: 1px solid var(--pp-borde-tabla); border-bottom: 0; box-shadow: none; }
.pp-documentos-tabla tbody:first-of-type tr.pp-doc-grupo th { border-top: 0; }
.pp-documentos-tabla tr.pp-doc-sin-abrir > td { background: var(--pp-primario-suave); }
@media (max-width: 767.98px) {
  .pp-documentos-tabla tr.pp-doc-grupo { display: block; padding: 14px 16px 2px; border-bottom: 0; }
  .pp-documentos-tabla tr.pp-doc-grupo th { display: block; padding: 0; background: none; border: 0; font-size: 13px; color: var(--pp-texto-suave); }
  .pp-documentos-tabla tr.pp-doc-sin-abrir { background: var(--pp-primario-suave); }
  .pp-documentos-tabla tr.pp-doc-sin-abrir > td { background: transparent; }
}
/* Documentos: ventana de la contraseña (parciales/documentos-clave). Error debajo del campo, sin el icono de
   Bootstrap dentro del campo (taparía el ojo) */
.pp-clave-campo { margin-bottom: 18px; text-align: left; }
.pp-clave-campo .pp-con-boton.is-invalid,
.pp-campo-icono .pp-con-boton.is-invalid { background-image: none; }
.pp-clave-error { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; color: var(--pp-error); font-size: 13.5px; font-weight: 600; }
.pp-clave-error:empty { display: none; }
.pp-clave-error .icono { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
/* Aviso de error de la página (layouts/app.html), debajo del título: icono, raya roja y X para cerrarlo */
.pp-aviso-general { align-items: center; margin: -4px 0 20px; padding: 14px 48px 14px 16px; border-left: 4px solid var(--pp-error); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.pp-aviso-general > .icono { flex-shrink: 0; width: 20px; height: 20px; }
.pp-aviso-general .btn-close { padding: 16px; opacity: .65; }
.pp-aviso-general .btn-close:hover, .pp-aviso-general .btn-close:focus-visible { opacity: 1; }
/* Aviso flotante (Avisar con destino "flotante", p. ej. contraseña cambiada): abajo a la derecha, se va solo (app.js) */
.pp-aviso-flotante { position: fixed; right: 24px; bottom: 24px; z-index: 1090; max-width: 400px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 8px 14px 16px; background: var(--pp-superficie); border: 1px solid #BFE3D6; border-left: 4px solid var(--pp-exito); border-radius: var(--pp-radio); box-shadow: var(--pp-sombra-flotante); color: var(--pp-texto); font-weight: 500; line-height: 1.45; transition: opacity .2s ease, transform .2s ease; }
.pp-aviso-flotante > .icono { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: var(--pp-exito); }
.pp-aviso-flotante > span { flex: 1; }
.pp-aviso-flotante .btn-close { flex-shrink: 0; padding: 10px; margin: -6px 0 -6px 4px; opacity: .65; }
.pp-aviso-flotante .btn-close:hover, .pp-aviso-flotante .btn-close:focus-visible { opacity: 1; }
.pp-aviso-flotante.saliendo { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: no-preference) { .pp-aviso-flotante { animation: pp-flotante-entra .25s ease-out; } }
@keyframes pp-flotante-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) { .pp-aviso-flotante { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
.pp-solicitudes th a { color: inherit; text-decoration: none; }
/* Toda la fila abre la solicitud: código en gris (dato secundario, sigue siendo el enlace para el teclado), fila azul
   suave al pasar el ratón y flecha "›" al final, como en la lista del móvil */
.pp-solicitudes .pp-sol-codigo a { color: var(--pp-texto-suave); text-decoration: none; }
.pp-solicitudes .pp-sol-codigo a:focus-visible { text-decoration: underline; }
.pp-solicitudes tr[data-fila-enlace] { cursor: pointer; }
.pp-solicitudes .pp-sol-ir { width: 40px; text-align: right; color: var(--pp-texto-suave); font-size: 22px; line-height: 1; }
@media (hover: hover) {
  .pp-solicitudes tbody tr[data-fila-enlace]:hover > td { background-color: var(--pp-primario-suave); }
  .pp-solicitudes tbody tr[data-fila-enlace]:hover .pp-sol-codigo a { text-decoration: underline; }
  .pp-solicitudes tbody tr[data-fila-enlace]:hover .pp-sol-ir { color: var(--pp-primario); }
}
@media (max-width: 767.98px) { .pp-solicitudes .pp-sol-ir { display: none; } }
.pp-solicitudes th a:hover { color: var(--pp-primario); text-decoration: underline; }

/* Tabla que en pantallas estrechas se ve como una tarjeta por fila */
@media (max-width: 767.98px) {
  .pp-tabla-tarjetas thead { display: none; }
  .pp-tabla-tarjetas, .pp-tabla-tarjetas tbody, .pp-tabla-tarjetas tr, .pp-tabla-tarjetas td { display: block; width: 100%; }
  .pp-tabla-tarjetas tr { border-bottom: 1px solid var(--pp-borde); padding: 10px 4px; }
  .pp-tabla-tarjetas td { border: 0; padding: 4px 12px; display: flex; gap: 12px; justify-content: space-between; align-items: center; text-align: right; }
  .pp-tabla-tarjetas td::before { content: attr(data-etiqueta); font-size: 11.5px; font-weight: 700; color: var(--pp-texto-suave); text-transform: uppercase; letter-spacing: .02em; text-align: left; flex-shrink: 0; }
  .pp-tabla-tarjetas td.pp-acciones { justify-content: flex-end; }
  .pp-tabla-tarjetas td.pp-acciones .pp-botones { justify-content: flex-end; }
  .pp-tabla-tarjetas td.pp-acciones::before { margin-right: auto; }
  .pp-tabla-contenedor.pp-alta:has(.pp-tabla-tarjetas) { max-height: none; }
  /* Casillas de solicitudes en tarjetas: grandes, y sin la línea "Seleccionar" donde no hay casilla */
  .pp-tabla-tarjetas td.pp-sel { width: 100%; }
  .pp-tabla-tarjetas td.pp-sel:empty { display: none; }
  .pp-tabla-tarjetas td.pp-sel .form-check-input, .pp-sel-todas-movil .form-check-input { width: 22px; height: 22px; }
  /* Documentos: tarjeta corta. Nombre del documento, persona y "Tipo · Fecha" a la izquierda; Ver y Descargar
     uno encima del otro a la derecha. Sin etiquetas en mayúsculas */
  .pp-documentos-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 4px; }
  .pp-documentos-tabla td { display: block; padding: 0 0 0 12px; text-align: left; min-width: 0; }
  .pp-documentos-tabla td::before { content: none; }
  .pp-documentos-tabla td.pp-doc-otro { display: none; }
  .pp-documentos-tabla td.pp-doc-desc { font-size: 15px; line-height: 1.3; }
  .pp-documentos-tabla .pp-doc-movil { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--pp-texto-suave); }
  .pp-documentos-tabla .pp-doc-movil.pp-doc-persona { color: var(--pp-texto); }
  .pp-documentos-tabla .pp-doc-movil span { white-space: nowrap; }
  .pp-documentos-tabla td.pp-acciones { padding: 0 12px 0 0; }
  .pp-documentos-tabla td.pp-acciones .pp-botones { flex-direction: column; align-items: stretch; gap: 8px; }
  /* 40 px de alto: se aciertan mejor con el dedo */
  .pp-documentos-tabla td.pp-acciones .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  /* Marcaje del personal: tarjeta compacta. Nombre y código a la izquierda, último marcaje a la derecha;
     debajo, incidencia y "Fichar" (o "Anular") a todo lo ancho, con 44 px para el dedo */
  .pp-marcaje-tabla thead { display: none; }
  .pp-marcaje-tabla, .pp-marcaje-tabla tbody { display: block; width: 100%; }
  .pp-marcaje-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom ult" "cod ult" "avi avi" "acc acc"; column-gap: 12px; padding: 14px 12px; border-bottom: 1px solid var(--pp-borde-tabla); background: var(--pp-superficie); }
  .pp-marcaje-tabla td, .pp-marcaje-tabla tbody tr:hover td { border: 0; padding: 0; background: transparent; }
  /* La celda del nombre se "deshace" para que su aviso ocupe una línea propia a todo lo ancho */
  .pp-marcaje-tabla td.pp-m-nombre { display: contents; }
  .pp-marcaje-tabla .pp-m-texto { grid-area: nom; font-size: 15px; font-weight: 600; }
  .pp-marcaje-tabla .pp-aviso-fila { grid-area: avi; margin-top: 10px; }
  .pp-marcaje-tabla td.pp-m-codigo { grid-area: cod; font-size: 12.5px; color: var(--pp-texto-suave); }
  .pp-marcaje-tabla td.pp-m-codigo::before { content: attr(data-etiqueta) " "; }
  .pp-marcaje-tabla td.pp-m-ultimo { grid-area: ult; align-self: start; text-align: right; font-size: 13px; color: var(--pp-texto-suave); }
  .pp-marcaje-tabla td.pp-m-ultimo::before { content: attr(data-etiqueta); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
  .pp-marcaje-tabla td.pp-m-accion { grid-area: acc; margin-top: 10px; }
  .pp-marcaje-tabla td.pp-m-accion form { display: flex; gap: 8px; justify-content: flex-end; }
  .pp-marcaje-tabla .pp-fichar-persona .form-select { flex: 1; min-width: 0; min-height: 44px; font-size: 15px; }
  .pp-marcaje-tabla td.pp-m-accion .btn { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .pp-tabla-contenedor.pp-alta:has(.pp-marcaje-tabla) { max-height: none; }
  .pp-tarjeta > .pp-sel-todas-movil { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--pp-borde); font-weight: 600; cursor: pointer; }
}

/* Detalle */
.pp-solicitud-cabecera { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.pp-solicitud-titulo { font-size: 18px; font-weight: 700; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--pp-primario-oscuro); }
.pp-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; text-decoration: none; }
/* Botones del detalle: decisiones juntas; Imprimir y Anular aparte (en el ordenador, tras una raya; en el móvil, debajo) */
.pp-acciones-decidir, .pp-acciones-otras { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-acciones-decidir form, .pp-acciones-otras form { margin: 0; }
.pp-acciones-decidir + .pp-acciones-otras { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--pp-borde); }
@media (max-width: 767.98px) {
  .pp-solicitud-acciones { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .pp-acciones-decidir, .pp-acciones-otras { display: grid; grid-template-columns: 1fr 1fr; }
  .pp-acciones-decidir + .pp-acciones-otras { margin-left: 0; padding-left: 0; border-left: 0; }
  .pp-acciones-decidir .btn, .pp-acciones-otras .btn { width: 100%; min-height: 44px; }
}
.pp-volver .icono { transform: rotate(180deg); }
.pp-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; margin: 0; }
.pp-datos dt { font-size: 11.5px; font-weight: 500; color: var(--pp-texto-suave); text-transform: uppercase; letter-spacing: .02em; }
.pp-datos dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.pp-historial { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.pp-historial li { padding: 7px 0 7px 18px; border-bottom: 1px solid var(--pp-borde-tabla); position: relative; }
.pp-historial li:last-child { border-bottom: 0; }
.pp-historial li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-primario); }
.pp-documentos { list-style: none; margin: 0 0 16px; padding: 0; }
.pp-documentos li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--pp-borde-tabla); }
.pp-documentos li form { margin: 0; }
.pp-documento-nombre { flex: 1 1 200px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.pp-documento-nombre small { color: var(--pp-texto-suave); margin-left: 6px; }
/* Vista previa de documentos (modal #visor-documento) */
.pp-visor-titulo { overflow-wrap: anywhere; }
.pp-visor-cuerpo { display: flex; align-items: center; justify-content: center; min-height: 200px; background: var(--pp-fondo); }
.pp-visor-marco { width: 100%; height: 75vh; border: 0; background: #fff; }
.pp-visor-imagen { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; }
.pp-visor-mensaje { margin: 0; text-align: center; color: var(--pp-texto-suave); }
/* Modal de confirmación (parciales/confirmar.html) */
.pp-confirmar-icono { color: var(--pp-error); margin-right: 8px; }
/* Marcaje de producción: tarjeta "Tu último marcaje de producción" */
.pp-ultimo-produccion { border-left: 4px solid var(--pp-primario); }
.pp-ultimo-marcaje { display: flex; align-items: center; gap: 20px; }
.pp-ultimo-momento { display: flex; flex-direction: column; align-items: center; min-width: 84px; line-height: 1.25; }
.pp-ultimo-momento small { color: var(--pp-texto-suave); font-weight: 600; font-size: 12px; }
.pp-ultimo-momento strong { font-size: 18px; color: var(--pp-primario-oscuro); font-variant-numeric: tabular-nums; }
.pp-ultimo-tarea { color: var(--pp-texto-suave); min-width: 0; overflow-wrap: anywhere; }
/* Tarjeta plegable (details): el título hace de botón y lleva una flecha */
.pp-plegable > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; margin-bottom: 0; }
.pp-plegable > summary::-webkit-details-marker { display: none; }
.pp-plegable > summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.pp-plegable[open] > summary { margin-bottom: 16px; }
.pp-plegable[open] > summary::after { transform: rotate(-135deg); }
.pp-filtro-resumen { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--pp-texto-suave); }
/* Móvil: las fechas del resumen en su propia línea y sin partirse; la flecha no se encoge con títulos largos */
.pp-plegable > summary::after { flex-shrink: 0; }
.pp-filtro-resumen { white-space: nowrap; }
@media (max-width: 575.98px) { .pp-filtro-resumen { display: block; margin: 2px 0 0; } }
/* Lista de partes de trabajo (como la web PHP): contador, buscador y una tarjeta por parte */
.pp-contador-partes { margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--pp-primario-suave); color: var(--pp-primario); font-size: 12px; font-weight: 700; }
.pp-buscador-partes { position: relative; margin-bottom: 14px; }
/* Código del parte entre el nombre y la fecha, sin partirse */
.pp-parte-cuerpo .pp-parte-codigo { display: block; font-size: 13px; font-weight: 600; color: var(--pp-texto-suave); white-space: nowrap; }
/* Buscador y fechas de los partes en una línea (en el móvil: buscador, y Desde / Hasta a medias debajo) */
.pp-partes-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.pp-partes-filtros .pp-buscador-partes { flex: 2 1 260px; margin: 0; }
.pp-partes-filtros form { display: flex; align-items: flex-end; gap: 12px; flex: 2 1 320px; margin: 0; }
.pp-partes-filtros .pp-filtro { flex: 1 1 0; min-width: 0; }
.pp-partes-filtros .form-label { font-size: 11.5px; margin-bottom: 4px; }
[data-lista-partes][aria-busy=true] { opacity: .45; transition: opacity .15s; }
@media (max-width: 575.98px) {
  .pp-partes-filtros form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; flex-basis: 100%; }
  .pp-partes-filtros input[type=date] { width: 100%; min-width: 0; }
  .pp-partes-filtros form .btn { grid-column: 1 / -1; }
}
@media (max-width: 359.98px) { .pp-partes-filtros input[type=date] { padding-left: 8px; padding-right: 6px; font-size: 15px; } }
.pp-buscador-partes .icono { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pp-texto-suave); pointer-events: none; }
.pp-buscador-partes .form-control { padding-left: 40px; }
.pp-partes { display: flex; flex-direction: column; gap: 10px; }
.pp-parte { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); color: var(--pp-texto); text-decoration: none; background: var(--pp-superficie); transition: border-color .15s, box-shadow .15s; }
.pp-parte:hover, .pp-parte:focus-visible { border-color: var(--pp-primario); box-shadow: var(--pp-sombra); color: var(--pp-texto); }
.pp-parte[hidden] { display: none; }
.pp-parte-icono { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--pp-primario-suave); color: var(--pp-primario); }
.pp-parte-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pp-parte-cuerpo strong { font-size: 15px; overflow-wrap: anywhere; }
.pp-parte-cuerpo small { display: flex; align-items: center; gap: 6px; color: var(--pp-texto-suave); font-size: 12.5px; }
.pp-parte-cuerpo small .icono { width: 13px; height: 13px; }
.pp-parte-flecha { margin-left: auto; color: var(--pp-texto-suave); }
/* Marcaje de producción en un modal (parciales/produccion-modal.html y layouts/modal.html) */
.pp-modal-marco { display: block; width: 100%; height: min(80vh, 760px); border: 0; background: var(--pp-fondo); }
@media (max-width: 575.98px) { .pp-modal-marco { height: calc(100vh - 56px); } }
body.pp-en-modal { background: var(--pp-fondo); }
.pp-contenido-modal { padding: 20px 24px 32px; }
.pp-cancelar-modal { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; border-radius: 999px; background: var(--pp-superficie); }
.pp-flecha-atras { transform: rotate(180deg); }
/* Equipo de la tarea (producción): ruta centrada, tarjetas de personas, barra de selección y confirmación */
.pp-ruta-tarea { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 0 0 16px; text-align: center; color: var(--pp-texto-suave); font-weight: 600; }
.pp-ruta-tarea strong { color: var(--pp-texto); }
.pp-fichar-todos { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.pp-fichar-todos .btn, .pp-emp-boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pp-seccion-emp { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-texto-suave); }
.pp-emps { display: flex; flex-direction: column; gap: 10px; }
.pp-emp { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); background: var(--pp-superficie); }
.pp-emp-marcada { border-color: var(--pp-primario); background: var(--pp-primario-suave); }
.pp-emp .pp-emp-check { flex-shrink: 0; width: 20px; height: 20px; margin: 0; }
.pp-emp-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--pp-primario-suave); color: var(--pp-primario); font-weight: 700; font-size: 14px; }
.pp-emp-datos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pp-emp-datos small { color: var(--pp-texto-suave); font-size: 12.5px; overflow-wrap: anywhere; }
.pp-emp-accion, .pp-emp-boton { margin-left: auto; flex-shrink: 0; }
.pp-emp-boton { min-width: 104px; }
/* Resultado de marcar o anular en la pantalla del equipo (debajo de la ruta) */
.pp-aviso-produccion { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid; border-radius: var(--pp-radio); }
.pp-aviso-produccion > div { display: flex; flex-direction: column; gap: 2px; }
.pp-aviso-produccion strong { font-size: 15px; }
.pp-aviso-produccion small { font-size: 13px; }
.pp-aviso-produccion-icono { width: 26px; height: 26px; flex-shrink: 0; }
.pp-aviso-produccion-ok { border-color: #BFE3C8; background: var(--pp-exito-fondo); color: var(--pp-exito); }
.pp-aviso-produccion-error { border-color: #F1C9C8; background: var(--pp-error-fondo); color: var(--pp-error); }
.pp-aviso-produccion-info { border-color: #C9D8EE; background: var(--pp-primario-suave); color: var(--pp-primario-oscuro); }
.pp-aviso-produccion-corregido { border-color: #F0D48A; background: var(--pp-aviso-fondo); color: var(--pp-aviso); }
/* Dentro del aviso verde: a quién se le ha corregido el marcaje anterior (ámbar) */
.pp-aviso-produccion small.pp-aviso-correccion { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 6px 10px; border: 1px solid #F0D48A; border-radius: 8px; background: var(--pp-aviso-fondo); color: var(--pp-aviso); }
.pp-aviso-correccion .icono { flex-shrink: 0; margin-top: 2px; }
/* Confirmación de fichaje: marcajes que PresenciaPin corregirá */
.pp-cf-correcciones p { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border: 1px solid #F0D48A; border-radius: 8px; background: var(--pp-aviso-fondo); color: var(--pp-aviso); font-size: 13px; }
.pp-cf-correcciones .icono { flex-shrink: 0; margin-top: 2px; }
.pp-aviso-produccion-anulado { border-color: #C9D8EE; background: var(--pp-primario-suave); color: var(--pp-primario-oscuro); }
/* Quien ya está fichando en la tarea: en verde */
.pp-emp-activa { border-left: 4px solid var(--pp-exito); }
.pp-emp-activa .pp-emp-avatar { background: var(--pp-exito-fondo); color: var(--pp-exito); }
.pp-emp-datos .pp-emp-desde { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--pp-exito-fondo); color: var(--pp-exito); font-weight: 600; }
.pp-emp-anular { border: 1px solid var(--pp-borde); background: var(--pp-superficie); color: var(--pp-error); }
.pp-emp-anular:hover, .pp-emp-anular:focus-visible { border-color: #F1C9C8; background: var(--pp-error-fondo); color: var(--pp-error); }
/* Cabecera de sección con botón ("Anular todos") y confirmación en rojo al anular */
.pp-seccion-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.pp-seccion-cabecera .pp-seccion-emp { margin: 0; }
.pp-cf-anular .pp-cf-icono { background: var(--pp-error-fondo); color: var(--pp-error); }
.pp-barra-masivo { position: sticky; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 14px; padding: 12px 16px; border-radius: var(--pp-radio); background: var(--pp-primario-oscuro); color: #fff; font-weight: 600; box-shadow: var(--pp-sombra-flotante); }
.pp-barra-masivo[hidden] { display: none; }
/* Consulta de solicitudes: columna de casillas y lista de la confirmación (puede ser larga) */
.pp-solicitudes .pp-sel { width: 36px; text-align: center; }
.pp-solicitudes .pp-sel .form-check-input, .pp-sel-todas-movil .form-check-input { margin: 0; border-color: var(--pp-texto-suave); cursor: pointer; }
/* "Seleccionar todas" encima de las tarjetas: solo en el móvil (allí la cabecera de la tabla no se ve) */
.pp-sel-todas-movil { display: none; }
.pp-cf-resultado .pp-cf-intro { margin-bottom: 20px; }
.pp-cf-resultado:not(.pp-cf-anular) .pp-cf-icono { background: var(--pp-exito-fondo); color: var(--pp-exito); }
.pp-cf-resultado.pp-cf-neutro .pp-cf-icono { background: var(--pp-primario-suave); color: var(--pp-primario); }
.pp-cf-aceptar { width: 100%; padding: 10px 12px; border-radius: 10px; font-weight: 700; }
/* Recomendación antes de aprobar o denegar varias solicitudes: recuadro ámbar con icono de aviso */
.pp-cf-cuidado { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 14px; padding: 10px 12px; border: 1px solid #F0D48A; border-radius: 10px; background: var(--pp-aviso-fondo); color: var(--pp-aviso); font-size: 13px; text-align: left; }
.pp-cf-cuidado .icono { flex-shrink: 0; margin-top: 1px; }
/* Sin justificante ni observaciones no hay nada que revisar: sin aviso */
.pp-cf-cuidado[hidden] { display: none; }
.pp-cf-lista { max-height: min(40vh, calc(100vh - 470px)); min-height: 60px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.pp-cf-lista li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--pp-borde); }
.pp-cf-lista li:last-child { border-bottom: 0; }
.pp-cf-lista strong { color: var(--pp-texto); }
.pp-cf-lista small { color: var(--pp-texto-suave); }
.pp-barra-botones { display: flex; gap: 8px; }
/* En el móvil, a todo el ancho: las dos acciones (denegar / aprobar) lado a lado y "Cancelar" debajo; así no se
   salen ni a 320 px. En el ordenador, los tres en fila. */
@media (max-width: 575.98px) {
  .pp-barra-botones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .pp-barra-botones .btn { padding: 8px 6px; font-size: 13px; }
  .pp-barra-botones [data-barra-cancelar] { grid-column: 1 / -1; order: 1; }
}
/* Confirmación de fichaje: icono, título, caja con los datos y dos botones */
.pp-cf-dialogo { max-width: 420px; }
.pp-cf { position: relative; padding: 28px 26px 24px; border: 0; border-radius: 16px; background: var(--pp-superficie); text-align: center; }
/* "X" de cerrar arriba a la derecha (hace lo mismo que Cancelar); zona de 32 px para el dedo */
.pp-cf-cerrar { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; background-size: 14px; }
.pp-cf-icono { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--pp-primario-suave); color: var(--pp-primario); }
.pp-cf-titulo { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.pp-cf-intro { margin: 0 0 14px; font-size: 14px; color: var(--pp-texto-suave); }
.pp-cf-caja { margin-bottom: 16px; padding: 16px 18px; border-radius: 12px; background: var(--pp-fondo); text-align: left; font-size: 14px; }
.pp-cf-caja p { margin: 6px 0 0; color: var(--pp-texto-suave); overflow-wrap: anywhere; }
.pp-cf-caja p strong { color: var(--pp-texto); }
.pp-cf-nombres { margin: 0 0 8px; padding: 0; list-style: none; font-size: 16px; font-weight: 700; color: var(--pp-texto); }
.pp-cf-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-cf-botones .btn { padding: 10px 12px; border-radius: 10px; font-weight: 700; }
.pp-cf-cancelar { border: 0; background: var(--pp-fondo); color: var(--pp-texto); }
.pp-cf-cancelar:hover, .pp-cf-cancelar:focus-visible { background: var(--pp-superficie-hover); color: var(--pp-texto); }
@media (max-width: 575.98px) { .pp-emp { flex-wrap: wrap; } .pp-emp-accion, .pp-emp-boton { width: 100%; } .pp-emp-accion .btn { width: 100%; } }
/* Últimos marcajes del equipo de producción */
.pp-filtros-equipo { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.pp-filtro-equipo { flex: 1 1 240px; max-width: 320px; }
.pp-ultimos-equipo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pp-ultimos-equipo li { display: flex; align-items: center; gap: 20px; }
.pp-ultimo-persona { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.pp-ultimo-persona span { color: var(--pp-texto-suave); overflow-wrap: anywhere; }
.pp-ultimo-momento.pp-antiguo small { color: var(--pp-aviso); }
@media (max-width: 575.98px) { .pp-visor-marco { height: calc(100vh - 140px); } }
/* Campo de archivo con textos traducidos: el input real queda encima, transparente,
   y recibe los clics, el teclado y los avisos de validación del navegador */
.pp-archivo { position: relative; }
.pp-archivo-campo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.pp-archivo-caja { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.pp-archivo-boton { display: flex; align-items: center; padding: 0 12px; background: var(--pp-superficie-hover); border-right: 1px solid var(--pp-borde); white-space: nowrap; }
.pp-archivo-nombre { display: flex; align-items: center; padding: 0 12px; min-width: 0; color: var(--pp-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-archivo-nombre.pp-archivo-elegido { color: inherit; }
.pp-archivo-campo:hover + .pp-archivo-caja .pp-archivo-boton { filter: brightness(.96); }
.pp-archivo-campo:focus-visible + .pp-archivo-caja { border-color: var(--pp-primario); box-shadow: 0 0 0 3px rgba(var(--pp-primario-rgb), .14); }
.pp-observacion { min-width: 220px; }
.pp-firmas { display: none; }
.pp-solo-impresion { display: none; }


/* Calendario propio de todas las fechas (solo en el ordenador): un mes, el periodo como una franja.
   En el móvil se usa el del teléfono. */
@media (min-width: 768px) and (pointer: fine) {
  input[type=date].pp-cal-campo {
    cursor: pointer; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4B91' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  }
  input[type=date].pp-cal-campo::-webkit-calendar-picker-indicator { display: none; }
}
input[type=date].pp-cal-activo { border-color: var(--pp-primario); box-shadow: 0 0 0 3px rgba(var(--pp-primario-rgb), .18); }
.pp-cal {
  position: absolute; z-index: 1060; padding: 16px 18px 14px;
  background: var(--pp-superficie); color: var(--pp-texto);
  border: 1px solid var(--pp-borde); border-radius: var(--pp-radio); box-shadow: var(--pp-sombra-flotante);
  animation: pp-cal-entrar .14s ease-out;
}
@keyframes pp-cal-entrar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-cal { animation: none; } }
.pp-cal-mes { width: 266px; }
.pp-cal-cabecera { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; margin-bottom: 6px; }
.pp-cal-titulo { font-size: 15px; font-weight: 700; color: var(--pp-primario-oscuro); }
.pp-cal-titulo::first-letter { text-transform: uppercase; }
.pp-cal-nav {
  position: absolute; top: 0; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; color: var(--pp-primario); cursor: pointer;
}
.pp-cal-nav:hover { background: var(--pp-primario-suave); }
.pp-cal-nav.anterior { left: -4px; }
.pp-cal-nav.siguiente { right: -4px; }
.pp-cal-nav .icono { width: 18px; height: 18px; }
.pp-cal-rejilla { display: grid; grid-template-columns: repeat(7, 38px); row-gap: 4px; }
.pp-cal-dia-semana { height: 26px; line-height: 26px; text-align: center; font-size: 12px; font-weight: 500; color: var(--pp-texto-suave); }
/* La celda lleva la franja del periodo; el botón, el círculo del día */
.pp-cal-celda { position: relative; display: grid; place-items: center; height: 38px; }
.pp-cal-celda.en-rango::before, .pp-cal-celda.inicio::before, .pp-cal-celda.fin::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: var(--pp-primario-suave);
}
.pp-cal-celda.inicio::before { left: 50%; }
.pp-cal-celda.fin::before { right: 50%; }
.pp-cal-celda.inicio.fin::before { display: none; }
.pp-cal-celda.en-rango.lunes::before { left: 2px; border-radius: 17px 0 0 17px; }
.pp-cal-celda.en-rango.domingo::before { right: 2px; border-radius: 0 17px 17px 0; }
.pp-cal-dia {
  position: relative; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--pp-texto); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.pp-cal-dia:hover { background: var(--pp-superficie-hover); }
.pp-cal-nav:focus-visible, .pp-cal-dia:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: 1px; }
.pp-cal-celda.finde .pp-cal-dia { color: #6F737B; }
.pp-cal-celda.pasado .pp-cal-dia { color: #6F737B; } /* gris suave con contraste 4,5:1 */
.pp-cal-celda.hoy .pp-cal-dia { box-shadow: inset 0 0 0 1.5px var(--pp-primario); font-weight: 700; color: var(--pp-primario); }
.pp-cal-celda.inicio .pp-cal-dia, .pp-cal-celda.fin .pp-cal-dia { background: var(--pp-primario); color: #fff; font-weight: 700; box-shadow: none; }
.pp-cal-celda.en-rango .pp-cal-dia:hover { background: rgba(var(--pp-primario-rgb), .14); }
.pp-cal-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pp-borde); font-size: 14px;
}
.pp-cal-resumen strong { color: var(--pp-primario-oscuro); }
.pp-cal-pista { color: var(--pp-texto-suave); }
.pp-cal-hoy { flex: none; font-size: 13px; font-weight: 500; }

/* Selector de hora (horas de la nueva solicitud, solo en el ordenador): dos columnas con el estilo del calendario */
@media (min-width: 768px) and (pointer: fine) {
  input[type=time].pp-hora-campo {
    cursor: pointer; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4B91' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  }
  input[type=time].pp-hora-campo::-webkit-calendar-picker-indicator { display: none; }
}
input[type=time].pp-cal-activo { border-color: var(--pp-primario); box-shadow: 0 0 0 3px rgba(var(--pp-primario-rgb), .18); }
.pp-hora-sel { padding: 14px 14px 12px; }
.pp-hora-columnas { display: flex; gap: 6px; }
.pp-hora-col { width: 82px; }
.pp-hora-etiqueta { height: 24px; line-height: 24px; text-align: center; font-size: 12px; font-weight: 500; color: var(--pp-texto-suave); }
/* Relleno de 96px arriba y abajo: la primera y la última opción también pueden quedar en el centro */
.pp-hora-lista {
  height: 228px; padding: 96px 4px; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: none;
  mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.pp-hora-lista::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .pp-hora-lista { scroll-behavior: auto; } }
.pp-hora-opcion {
  display: block; width: 100%; height: 36px; margin: 0; border: 0; border-radius: 18px;
  background: transparent; color: var(--pp-texto); font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.pp-hora-opcion:hover { background: var(--pp-superficie-hover); }
.pp-hora-opcion:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: -2px; }
.pp-hora-opcion.elegida { background: var(--pp-primario); color: #fff; font-weight: 700; }
.pp-hora-sep { align-self: center; margin-top: 24px; font-size: 18px; font-weight: 700; color: var(--pp-primario-oscuro); }

/* Edición de incidencias: "Borrar" discreto (gris; rojo al pasar el ratón o con el foco) */
.pp-borrar-suave { color: var(--pp-texto-suave); border-color: var(--pp-borde); background: transparent; }
.pp-borrar-suave:hover, .pp-borrar-suave:focus-visible { color: #fff; background: var(--pp-error); border-color: var(--pp-error); }
.pp-ed-no-computa-movil { display: none; }
/* Aviso de la confirmación de borrado: en rojo y negrita, con la flecha de deshacer tachada, encima de los botones */
.pp-cf-aviso-borrar { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 18px; color: var(--pp-error); font-size: 14px; font-weight: 700; }
.pp-cf-aviso-borrar .icono { flex-shrink: 0; }
/* En el móvil, cada fila de la tabla es una línea de lista: fecha arriba, detalle debajo y la papelera a la derecha */
@media (max-width: 575.98px) {
  .pp-tabla-edicion thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-tabla-edicion, .pp-tabla-edicion tbody { display: block; }
  .pp-tabla-edicion tr { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pp-borde); }
  .pp-tabla-edicion tr:last-child { border-bottom: 0; }
  .pp-tabla-edicion td { display: block; padding: 0; border: 0; background: none; }
  .pp-tabla-edicion tbody tr:hover td { background: none; }
  .pp-tabla-edicion .pp-ed-fecha { grid-column: 1; font-weight: 700; font-size: 14px; color: var(--pp-texto); }
  .pp-tabla-edicion .pp-ed-borrar { grid-column: 2; grid-row: 1 / span 2; }
  .pp-tabla-edicion .pp-ed-detalle, .pp-tabla-edicion .pp-ed-computa { grid-column: 1; font-size: 13px; color: var(--pp-texto-suave); }
  .pp-tabla-edicion .pp-ed-computa { display: none; }
  .pp-tabla-edicion .pp-ed-computa:has(.pp-ed-no-computa) { display: block; color: var(--pp-aviso); font-weight: 600; }
  .pp-tabla-edicion .pp-ed-no-computa { display: none; }
  .pp-tabla-edicion .pp-ed-no-computa-movil { display: inline; }
  .pp-tabla-contenedor:has(.pp-tabla-edicion) { max-height: none; overflow: visible; }
  .pp-tabla-edicion-horas tr { grid-template-columns: auto auto auto 1fr auto; column-gap: 0; }
  .pp-tabla-edicion-horas .pp-ed-borrar { margin-left: 12px; }
  .pp-tabla-edicion-horas .pp-ed-fecha, .pp-tabla-edicion-horas .pp-ed-detalle { grid-column: 1 / span 4; }
  .pp-tabla-edicion-horas .pp-ed-borrar { grid-column: 5; grid-row: 1 / span 3; }
  .pp-tabla-edicion-horas .pp-ed-desde, .pp-tabla-edicion-horas .pp-ed-hasta, .pp-tabla-edicion-horas .pp-ed-duracion { grid-row: 3; font-size: 13px; color: var(--pp-texto-suave); text-align: left; }
  .pp-tabla-edicion-horas .pp-ed-hasta::before { content: "\2013\00a0"; margin-left: 4px; }
  .pp-tabla-edicion-horas .pp-ed-duracion::before { content: "("; margin-left: 6px; }
  .pp-tabla-edicion-horas .pp-ed-duracion::after { content: ")"; }
  .pp-tabla-edicion .pp-borrar-suave { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
  .pp-tabla-edicion .pp-borrar-suave .icono { width: 18px; height: 18px; }
  .pp-tabla-edicion .pp-borrar-texto { display: none; }
}

/* 11. Documentos, tablón y campana de avisos -------------------------------------- */
.pp-boton-campana { position: relative; padding: 7px 9px; }
.pp-campana-numero { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: 10.5px; border: 2px solid var(--pp-superficie); }
.pp-avisos-menu { min-width: 300px; padding-bottom: 6px; }
.pp-avisos-menu .dropdown-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pp-aviso { display: flex; align-items: center; gap: 10px; padding-top: 9px; padding-bottom: 9px; font-size: 14px; white-space: normal; }
.pp-aviso .icono { color: var(--pp-primario); flex-shrink: 0; }
.pp-aviso .pp-contador-notificacion { margin-left: auto; flex-shrink: 0; }
.pp-nuevo { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--pp-primario); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; vertical-align: middle; }
.pp-anuncios { display: flex; flex-direction: column; gap: 10px; }
.pp-anuncio { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; margin: 0; }
.pp-anuncio-icono { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; background: var(--pp-primario-suave); color: var(--pp-primario); display: flex; align-items: center; justify-content: center; }
.pp-anuncio.visto .pp-anuncio-icono { background: var(--pp-fondo); color: var(--pp-texto-suave); }
.pp-anuncio-info { flex: 1 1 240px; min-width: 0; }
.pp-anuncio-nombre { font-size: 15px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.pp-anuncio-periodo { font-size: 12.5px; color: var(--pp-texto-suave); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 575.98px) {
  .pp-avisos-menu { min-width: 260px; }
}
/* Tablón: títulos de grupo ("Sin leer (2)", "Leídos") y fechas que no se parten */
.pp-tablon-grupo { margin: 8px 0 -2px; font-size: 13.5px; font-weight: 700; color: var(--pp-texto); }
.pp-anuncios > .pp-anuncios + .pp-anuncios .pp-tablon-grupo { margin-top: 16px; }
.pp-anuncio-periodo .pp-nowrap { white-space: nowrap; }
/* Tablón en el móvil: Ver y Descargar de 40 px de alto (se aciertan mejor con el dedo) */
@media (max-width: 767.98px) {
  .pp-anuncio .pp-botones .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .pp-tablon-grupo { font-size: 13px; color: var(--pp-texto-suave); }
}


/* 12. Cuadrante de solicitudes ----------------------------------------------------- */
.pp-cuadrante { padding: 16px 20px; margin-bottom: 18px; }
.pp-cuadrante-navegacion { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
/* Flechas del periodo: 40x36 */
.pp-cuadrante-navegacion > a.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 0 3px; font-size: 22px; line-height: 1; }
.pp-cuadrante-contenedor { overflow: auto; max-height: 70vh; border: 1px solid var(--pp-borde-tabla); border-radius: var(--pp-radio-sm); }
.pp-cuadrante-tabla { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; }
.pp-cuadrante-tabla th, .pp-cuadrante-tabla td { border-right: 1px solid var(--pp-borde-tabla); border-bottom: 1px solid var(--pp-borde-tabla); text-align: center; min-width: 34px; height: 34px; padding: 2px; }
.pp-cuadrante-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--pp-superficie); font-weight: 600; line-height: 1.1; }
.pp-cuadrante-tabla tfoot th, .pp-cuadrante-tabla tfoot td { background: var(--pp-superficie-hover); font-weight: 600; }
.pp-cuadrante-tabla .pp-cuadrante-nombre { position: sticky; left: 0; z-index: 1; background: var(--pp-superficie); text-align: left; min-width: 180px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; }
.pp-cuadrante-tabla thead .pp-cuadrante-nombre { z-index: 3; }
.pp-cuadrante-inicial { display: block; font-size: 10px; font-weight: 400; color: var(--pp-texto-suave); text-transform: uppercase; }
.pp-cuadrante-tabla .pp-finde { background-color: var(--pp-superficie-hover); }
.pp-cuadrante-tabla thead .pp-hoy { color: var(--pp-primario); box-shadow: inset 0 -3px 0 var(--pp-primario); }
.pp-cuadrante-tabla td.pp-no-laboral, .pp-muestra.pp-no-laboral { background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0, 0, 0, .06) 4px 8px); }
.pp-cuadrante-tabla td { font-weight: 600; color: #1f2937; }
/* Toda la casilla se puede pulsar (al menos 30 px de alto) */
.pp-cuadrante-tabla td a { color: inherit; text-decoration: none; display: flex; align-items: center; justify-content: center; min-height: 30px; }
.pp-cuadrante-tabla td a:hover { text-decoration: underline; }
.pp-cuadrante-tabla td.pp-texto-claro { color: #fff; }
.pp-cuadrante-tabla td.pp-pendiente, .pp-muestra.pp-pendiente { outline: 2px dashed var(--pp-aviso); outline-offset: -3px; }
.pp-cuadrante-tabla td.pp-pendiente-horas .pp-cuadrante-horas { border-style: dashed; }
.pp-cuadrante-horas { display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 5px; border: 1px solid var(--pp-primario); border-radius: 5px; color: var(--pp-primario); background: var(--pp-superficie); }
.pp-cuadrante-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 0; font-size: 12px; color: var(--pp-texto-suave); }
.pp-muestra { display: inline-block; width: 18px; height: 14px; border: 1px solid var(--pp-borde-tabla); vertical-align: middle; margin-right: -8px; }
.pp-cuadrante-leyenda .pp-cuadrante-horas { margin-right: -8px; }
/* Cada muestra con su texto, sin partirse entre líneas */
.pp-leyenda-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pp-leyenda-item > .pp-muestra, .pp-leyenda-item > .pp-cuadrante-horas { margin-right: 0; }
/* Móvil: nombres más estrechos para ver más días */
@media (max-width: 575.98px) {
  .pp-cuadrante { padding: 14px 12px; }
  /* Imprimir el cuadrante, solo desde el ordenador */
  .pp-cuadrante-navegacion [data-imprimir] { display: none; }
  .pp-cuadrante-tabla .pp-cuadrante-nombre { width: 118px; min-width: 0; max-width: 118px; padding: 2px 6px; font-size: 11.5px; }
  /* Los nombres largos y las filas de totales, en dos líneas (se leen enteros sin ensanchar la columna) */
  .pp-cuadrante-tabla tbody .pp-cuadrante-nombre, .pp-cuadrante-tabla tfoot .pp-cuadrante-nombre { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
  .pp-cuadrante-tabla tr.pp-fila-propia th.pp-cuadrante-nombre { padding-left: 9px; }
}
/* Raya del horario (abajo en cada día; el color real lo pone app.js con data-borde) */
.pp-muestra.pp-horario { background: var(--pp-superficie); box-shadow: inset 0 -4px 0 var(--pp-primario); }
.pp-cuadrante-leyenda + .pp-cuadrante-leyenda { margin-top: 6px; }
.pp-cuadrante-leyenda strong { font-weight: 600; color: var(--pp-texto); }
/* Días con pocas personas disponibles (ámbar) o ninguna (rojo, con "!" para no depender del color) */
.pp-cuadrante-tabla tfoot td.pp-disp-pocos, .pp-muestra.pp-disp-pocos { background: var(--pp-aviso-fondo); color: var(--pp-aviso); }
.pp-cuadrante-tabla tfoot td.pp-disp-nadie, .pp-muestra.pp-disp-nadie { background: var(--pp-error-fondo); color: var(--pp-error); }
.pp-cuadrante-tabla tfoot td.pp-disp-pocos, .pp-cuadrante-tabla tfoot td.pp-disp-nadie { font-weight: 700; }
.pp-cuadrante-tabla tfoot td.pp-disp-nadie::after { content: "!"; display: block; font-size: 9px; line-height: 1; }
/* Fila del usuario que consulta: la primera, con la franja azul como en las demás tablas */
.pp-cuadrante-tabla tr.pp-fila-propia th.pp-cuadrante-nombre { box-shadow: inset 4px 0 0 var(--pp-primario); background: var(--pp-primario-suave); color: var(--pp-primario-oscuro); padding-left: 12px; }
.pp-cuadrante-tabla tr.pp-fila-propia > * { border-bottom: 2px solid var(--pp-primario-suave); }
.pp-tu { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--pp-primario); }
/* "+" para pedir un permiso en un día libre de la fila propia: aparece al pasar el ratón o con el teclado;
   en pantallas táctiles (sin ratón) se ve siempre, más suave */
.pp-cuadrante-tabla td a.pp-pedir { display: grid; place-items: center; min-height: 28px; border-radius: 6px; color: transparent; text-decoration: none; }
.pp-cuadrante-tabla td a.pp-pedir:hover, .pp-cuadrante-tabla td a.pp-pedir:focus-visible { background: var(--pp-primario-suave); color: var(--pp-primario); text-decoration: none; }
.pp-cuadrante-tabla td a.pp-pedir:focus-visible { outline: 2px solid var(--pp-primario); outline-offset: -2px; }
.pp-pedir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (hover: none) { .pp-cuadrante-tabla td a.pp-pedir { color: rgba(var(--pp-primario-rgb), .45); } }

/* 13. Marcajes de producción --------------------------------------------------------- */
.pp-bloque { padding: 16px 20px; margin-bottom: 18px; }
.pp-modo-fecha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-lista-enlaces .list-group-item { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.pp-lista-enlaces .list-group-item > .icono:first-child { color: var(--pp-primario); flex: none; }
.pp-lista-enlaces .list-group-item > .icono:last-child { color: var(--pp-texto-suave); flex: none; }
.pp-enlace-texto { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pp-ruta { margin-bottom: 12px; font-size: 14px; }
.pp-tarea-actual { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-tarea-actual strong { font-size: 16px; }
@media (max-width: 575.98px) {
  .pp-lista-enlaces small { display: none; }
}

/* 14. Impresión ------------------------------------------------------------------ */
/* Consulta de tiempos impresa ("Descargar lo que ves" → PDF): A4 horizontal, con las tablas aunque se imprima desde
   el móvil, cada día entero en la misma página, la cabecera de la tabla en cada hoja y los totales solo al final */
.pp-informe-cabecera { display: none; }
/* Número de página al pie ("Página 1 de 11"), en el idioma de la página (html lang; el valenciano usa el catalán).
   Horizontal o vertical según quepa la tabla (app.js pone pp-imprimir-vertical en <html> antes de imprimir). */
@page informe-h { size: A4 landscape; margin: 10mm 10mm 14mm; @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-h-es { size: A4 landscape; margin: 10mm 10mm 14mm; @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-h-ca { size: A4 landscape; margin: 10mm 10mm 14mm; @bottom-right { content: "Pàgina " counter(page) " de " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-h-eu { size: A4 landscape; margin: 10mm 10mm 14mm; @bottom-right { content: "Orria " counter(page) " / " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-h-gl { size: A4 landscape; margin: 10mm 10mm 14mm; @bottom-right { content: "Páxina " counter(page) " de " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-h-en { size: A4 landscape; margin: 10mm 10mm 14mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-v { size: A4 portrait; margin: 10mm 10mm 14mm; @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-v-es { size: A4 portrait; margin: 10mm 10mm 14mm; @bottom-right { content: "Página " counter(page) " de " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-v-ca { size: A4 portrait; margin: 10mm 10mm 14mm; @bottom-right { content: "Pàgina " counter(page) " de " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-v-eu { size: A4 portrait; margin: 10mm 10mm 14mm; @bottom-right { content: "Orria " counter(page) " / " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-v-gl { size: A4 portrait; margin: 10mm 10mm 14mm; @bottom-right { content: "Páxina " counter(page) " de " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }
@page informe-v-en { size: A4 portrait; margin: 10mm 10mm 14mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #555; } }

@media print {
  .pp-informe-imprimible { page: informe-h; }
  html.pp-imprimir-vertical .pp-informe-imprimible { page: informe-v; }
  html[lang|="es"] .pp-informe-imprimible { page: informe-h-es; }
  html.pp-imprimir-vertical[lang|="es"] .pp-informe-imprimible { page: informe-v-es; }
  html[lang|="ca"] .pp-informe-imprimible { page: informe-h-ca; }
  html.pp-imprimir-vertical[lang|="ca"] .pp-informe-imprimible { page: informe-v-ca; }
  html[lang|="eu"] .pp-informe-imprimible { page: informe-h-eu; }
  html.pp-imprimir-vertical[lang|="eu"] .pp-informe-imprimible { page: informe-v-eu; }
  html[lang|="gl"] .pp-informe-imprimible { page: informe-h-gl; }
  html.pp-imprimir-vertical[lang|="gl"] .pp-informe-imprimible { page: informe-v-gl; }
  html[lang|="en"] .pp-informe-imprimible { page: informe-h-en; }
  html.pp-imprimir-vertical[lang|="en"] .pp-informe-imprimible { page: informe-v-en; }
  .pp-informe-cabecera { display: block !important; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--pp-primario); }
  .pp-informe-cabecera p { margin: 0; font-size: 12px; color: #333; }
  .pp-informe-cabecera .pp-informe-titulo { font-size: 18px; font-weight: 700; color: var(--pp-primario); margin-bottom: 4px; }
  .pp-informe-imprimible .pp-tm-chips { display: none !important; }
  .pp-informe-imprimible .pp-tabla thead { display: table-header-group; }
  .pp-informe-imprimible .pp-tabla tfoot { display: table-row-group; }
  .pp-informe-imprimible .pp-tabla tr, .pp-informe-imprimible .pp-tabla tbody.pp-dia-impresion { break-inside: avoid; page-break-inside: avoid; }
  .pp-informe-imprimible .pp-titulo-ficha { break-after: avoid; page-break-after: avoid; }
}
@media print and (max-width: 767.98px) {
  .pp-informe-imprimible .pp-tiempos-movil { display: none !important; }
  .pp-informe-imprimible .pp-solo-escritorio, .pp-informe-imprimible .pp-tabla-contenedor.pp-tiempos-escritorio,
  .pp-informe-imprimible .pp-tiempos-persona { display: block !important; }
  .pp-informe-imprimible .pp-resumen-informe.pp-solo-escritorio { display: flex !important; }
}
@media print {
  .pp-cabecera, .pp-menu, .pp-filtros, .pp-demo, .pp-saltar, .btn { display: none !important; }
  body, .pp-contenido { background: #fff; padding: 0; }
  .pp-tarjeta { box-shadow: none; border-color: #ccc; }
  .pp-tabla-contenedor, .pp-tabla-contenedor.pp-alta { max-height: none; overflow: visible; }
  .pp-tabla th { position: static; }
  .pp-no-imprimir, .modal { display: none !important; }
  .pp-solo-impresion { display: block !important; }
  .pp-firmas { display: flex !important; gap: 40px; margin-top: 40px; }
  .pp-firmas div { flex: 1; border-top: 1px solid #000; padding-top: 6px; font-size: 12px; min-height: 90px; }
  .pp-pestanas, .pp-encabezado { display: none !important; }
  .pp-cuadrante-contenedor { max-height: none; overflow: visible; border: 0; }
  .pp-cuadrante-tabla thead th, .pp-cuadrante-tabla .pp-cuadrante-nombre { position: static; }
  .pp-cuadrante-tabla { font-size: 9px; }
  .pp-cuadrante-tabla th, .pp-cuadrante-tabla td { min-width: 0; height: 22px; }
  td[data-color], td[data-color-lateral] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Marca de agua: logo fijo en la esquina inferior derecha, por detrás del contenido (z-index -1) y sin
   interceptar clics. No sale dentro del modal de producción (iframe, ya hay una en la página de detrás),
   con una ventana de Bootstrap abierta (se vería a través del fondo oscuro) ni al imprimir. */
body:not(.pp-en-modal)::after {
  content: '';
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: -1;
  width: 180px;
  height: 45px;
  background: url('../img/logo-systempin.png') no-repeat right bottom / contain;
  opacity: 0.25;
  pointer-events: none;
}
body.modal-open::after { display: none; }
@media (max-width: 575.98px) {
  body:not(.pp-en-modal)::after { right: 10px; bottom: 10px; width: 100px; height: 25px; }
}
@media print {
  body::after { display: none; }
}


/* Tema oscuro: se aplica solo si el sistema o el navegador lo tienen activado (prefers-color-scheme) */
/* Tema oscuro. Aspecto en el menú del usuario (<html data-tema>): vacío = el del dispositivo, "claro" u "oscuro".
   Las mismas reglas dos veces: en automático con el dispositivo en oscuro, y elegido a mano. */
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) {
    color-scheme: dark;
    --pp-primario: #7EA9EE;
    --pp-primario-rgb: 126, 169, 238;
    --pp-primario-oscuro: #A9C5F4;
    --pp-primario-suave: #1D2940;
    --pp-acento: #5CC4B9;
    --pp-fondo: #14171C;
    --pp-superficie: #1C2027;
    --pp-superficie-hover: #262B34;
    --pp-borde: #313742;
    --pp-borde-campo: #707887;
    --pp-borde-tabla: #272C35;
    --pp-texto: #E6E8EC;
    --pp-texto-suave: #A6ACB6;
    --pp-exito: #6CCB86;
    --pp-exito-fondo: #173022;
    --pp-error: #F29490;
    --pp-error-fuerte: #E5574F;
    --pp-error-fondo: #3B1E1E;
    --pp-aviso: #EBC15A;
    --pp-aviso-fondo: #342A10;
    --pp-notificacion: #C9303A;
    --pp-sombra: 0 2px 10px rgba(0, 0, 0, .35);
    --pp-sombra-flotante: 0 8px 24px rgba(0, 0, 0, .55);
    --bs-body-bg: var(--pp-fondo);
    --bs-body-color: var(--pp-texto);
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-bg: #262B34;
    --bs-tertiary-bg: #1F242B;
    --bs-heading-color: var(--pp-texto);
    --bs-border-color: var(--pp-borde);
    --bs-link-color: var(--pp-primario);
    --bs-link-hover-color: var(--pp-primario-oscuro);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-success-bg-subtle: var(--pp-exito-fondo); --bs-success-text-emphasis: var(--pp-exito); --bs-success-border-subtle: #2C5A3C;
    --bs-danger-bg-subtle: var(--pp-error-fondo); --bs-danger-text-emphasis: var(--pp-error); --bs-danger-border-subtle: #6A3332;
    --bs-warning-bg-subtle: var(--pp-aviso-fondo); --bs-warning-text-emphasis: var(--pp-aviso); --bs-warning-border-subtle: #5E4B1C;
    --bs-info-bg-subtle: var(--pp-primario-suave); --bs-info-text-emphasis: var(--pp-primario-oscuro); --bs-info-border-subtle: #34496E;
  }
  html:not([data-tema="claro"]) .btn-primary {
    --bs-btn-color: #0E1626; --bs-btn-hover-color: #0E1626; --bs-btn-active-color: #0E1626; --bs-btn-disabled-color: #0E1626; --bs-btn-disabled-bg: #4A5568; --bs-btn-disabled-border-color: #4A5568;
  }
  html:not([data-tema="claro"]) .btn-outline-primary {
    --bs-btn-hover-color: #0E1626; --bs-btn-active-color: #0E1626;
  }
  html:not([data-tema="claro"]) .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
  }
  html:not([data-tema="claro"]) img[src*="logo-systempin"],
  html:not([data-tema="claro"]) body:not(.pp-en-modal)::after {
    filter: grayscale(1) invert(1) sepia(1) saturate(1.5) hue-rotate(178deg) brightness(.78);
  }
  html:not([data-tema="claro"]) body:not(.pp-en-modal)::after {
    opacity: .14;
  }
  html:not([data-tema="claro"]) .pp-hoy-estado.dentro {
    background: #173022;
  }
  html:not([data-tema="claro"]) .pp-hoy-estado.dentro .pp-hoy-punto {
    background: #4FC27A;
  }
  html:not([data-tema="claro"]) .pp-limite-barra,
  html:not([data-tema="claro"]) .pp-limite-barra::-webkit-meter-bar {
    background: #2A303A;
  }
  html:not([data-tema="claro"]) .pp-cifra.positivo .pp-cifra-valor {
    color: var(--pp-exito);
  }
  html:not([data-tema="claro"]) .pp-cifra.negativo .pp-cifra-valor {
    color: var(--pp-error);
  }
  html:not([data-tema="claro"]) .pp-avatar,
  html:not([data-tema="claro"]) .pp-nuevo,
  html:not([data-tema="claro"]) .pp-saltar,
  html:not([data-tema="claro"]) .pp-saltar:focus,
  html:not([data-tema="claro"]) .pp-cal-celda.inicio .pp-cal-dia,
  html:not([data-tema="claro"]) .pp-cal-celda.fin .pp-cal-dia,
  html:not([data-tema="claro"]) .pp-hora-opcion.elegida {
    color: #0E1626;
  }
  html:not([data-tema="claro"]) .pp-barra-masivo {
    background: #263A5E;
  }
  html:not([data-tema="claro"]) .pp-tabla th {
    background: #232830;
  }
  html:not([data-tema="claro"]) .pp-tabla tbody tr:hover td {
    background: #222730;
  }
  html:not([data-tema="claro"]) .pp-tiempos tr.pp-semana-total td,
  html:not([data-tema="claro"]) .pp-tiempos tr.pp-semana-total th {
    background: #232830;
  }
  html:not([data-tema="claro"]) .alert-success {
    background: var(--pp-exito-fondo); border-color: #2C5A3C; color: var(--pp-exito);
  }
  html:not([data-tema="claro"]) .pp-punto {
    background: #4A515D;
  }
  html:not([data-tema="claro"]) .pp-estado-solicitud.anulacion {
    background: #2E2340; color: #C9A8F0;
  }
  html:not([data-tema="claro"]) .btn-outline-secondary {
    --bs-btn-color: #B4BAC4; --bs-btn-border-color: #5A626F; --bs-btn-hover-bg: #313742;
    --bs-btn-hover-color: #E6E8EC; --bs-btn-hover-border-color: #707887; --bs-btn-active-bg: #313742;
    --bs-btn-active-color: #E6E8EC; --bs-btn-disabled-color: #8A919C; --bs-btn-disabled-border-color: #3A414C;
  }
  html:not([data-tema="claro"]) .pp-cuadrante-tabla td[data-color=""],
  html:not([data-tema="claro"]) .pp-cuadrante-tabla td:not([data-color]) {
    color: var(--pp-texto);
  }
  html:not([data-tema="claro"]) .pp-cuadrante-tabla td.pp-no-laboral,
  html:not([data-tema="claro"]) .pp-muestra.pp-no-laboral {
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, .05) 4px 8px);
  }
}
html[data-tema="oscuro"] {
  color-scheme: dark;
  --pp-primario: #7EA9EE;
  --pp-primario-rgb: 126, 169, 238;
  --pp-primario-oscuro: #A9C5F4;
  --pp-primario-suave: #1D2940;
  --pp-acento: #5CC4B9;
  --pp-fondo: #14171C;
  --pp-superficie: #1C2027;
  --pp-superficie-hover: #262B34;
  --pp-borde: #313742;
  --pp-borde-campo: #707887;
  --pp-borde-tabla: #272C35;
  --pp-texto: #E6E8EC;
  --pp-texto-suave: #A6ACB6;
  --pp-exito: #6CCB86;
  --pp-exito-fondo: #173022;
  --pp-error: #F29490;
  --pp-error-fuerte: #E5574F;
  --pp-error-fondo: #3B1E1E;
  --pp-aviso: #EBC15A;
  --pp-aviso-fondo: #342A10;
  --pp-notificacion: #C9303A;
  --pp-sombra: 0 2px 10px rgba(0, 0, 0, .35);
  --pp-sombra-flotante: 0 8px 24px rgba(0, 0, 0, .55);
  --bs-body-bg: var(--pp-fondo);
  --bs-body-color: var(--pp-texto);
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-bg: #262B34;
  --bs-tertiary-bg: #1F242B;
  --bs-heading-color: var(--pp-texto);
  --bs-border-color: var(--pp-borde);
  --bs-link-color: var(--pp-primario);
  --bs-link-hover-color: var(--pp-primario-oscuro);
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-success-bg-subtle: var(--pp-exito-fondo); --bs-success-text-emphasis: var(--pp-exito); --bs-success-border-subtle: #2C5A3C;
  --bs-danger-bg-subtle: var(--pp-error-fondo); --bs-danger-text-emphasis: var(--pp-error); --bs-danger-border-subtle: #6A3332;
  --bs-warning-bg-subtle: var(--pp-aviso-fondo); --bs-warning-text-emphasis: var(--pp-aviso); --bs-warning-border-subtle: #5E4B1C;
  --bs-info-bg-subtle: var(--pp-primario-suave); --bs-info-text-emphasis: var(--pp-primario-oscuro); --bs-info-border-subtle: #34496E;
}
html[data-tema="oscuro"] .btn-primary {
  --bs-btn-color: #0E1626; --bs-btn-hover-color: #0E1626; --bs-btn-active-color: #0E1626; --bs-btn-disabled-color: #0E1626; --bs-btn-disabled-bg: #4A5568; --bs-btn-disabled-border-color: #4A5568;
}
html[data-tema="oscuro"] .btn-outline-primary {
  --bs-btn-hover-color: #0E1626; --bs-btn-active-color: #0E1626;
}
html[data-tema="oscuro"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}
html[data-tema="oscuro"] img[src*="logo-systempin"],
html[data-tema="oscuro"] body:not(.pp-en-modal)::after {
  filter: grayscale(1) invert(1) sepia(1) saturate(1.5) hue-rotate(178deg) brightness(.78);
}
html[data-tema="oscuro"] body:not(.pp-en-modal)::after {
  opacity: .14;
}
html[data-tema="oscuro"] .pp-hoy-estado.dentro {
  background: #173022;
}
html[data-tema="oscuro"] .pp-hoy-estado.dentro .pp-hoy-punto {
  background: #4FC27A;
}
html[data-tema="oscuro"] .pp-limite-barra,
html[data-tema="oscuro"] .pp-limite-barra::-webkit-meter-bar {
  background: #2A303A;
}
html[data-tema="oscuro"] .pp-cifra.positivo .pp-cifra-valor {
  color: var(--pp-exito);
}
html[data-tema="oscuro"] .pp-cifra.negativo .pp-cifra-valor {
  color: var(--pp-error);
}
html[data-tema="oscuro"] .pp-avatar,
html[data-tema="oscuro"] .pp-nuevo,
html[data-tema="oscuro"] .pp-saltar,
html[data-tema="oscuro"] .pp-saltar:focus,
html[data-tema="oscuro"] .pp-cal-celda.inicio .pp-cal-dia,
html[data-tema="oscuro"] .pp-cal-celda.fin .pp-cal-dia,
html[data-tema="oscuro"] .pp-hora-opcion.elegida {
  color: #0E1626;
}
html[data-tema="oscuro"] .pp-barra-masivo {
  background: #263A5E;
}
html[data-tema="oscuro"] .pp-tabla th {
  background: #232830;
}
html[data-tema="oscuro"] .pp-tabla tbody tr:hover td {
  background: #222730;
}
html[data-tema="oscuro"] .pp-tiempos tr.pp-semana-total td,
html[data-tema="oscuro"] .pp-tiempos tr.pp-semana-total th {
  background: #232830;
}
html[data-tema="oscuro"] .alert-success {
  background: var(--pp-exito-fondo); border-color: #2C5A3C; color: var(--pp-exito);
}
html[data-tema="oscuro"] .pp-punto {
  background: #4A515D;
}
html[data-tema="oscuro"] .pp-estado-solicitud.anulacion {
  background: #2E2340; color: #C9A8F0;
}
html[data-tema="oscuro"] .btn-outline-secondary {
  --bs-btn-color: #B4BAC4; --bs-btn-border-color: #5A626F; --bs-btn-hover-bg: #313742;
  --bs-btn-hover-color: #E6E8EC; --bs-btn-hover-border-color: #707887; --bs-btn-active-bg: #313742;
  --bs-btn-active-color: #E6E8EC; --bs-btn-disabled-color: #8A919C; --bs-btn-disabled-border-color: #3A414C;
}
html[data-tema="oscuro"] .pp-cuadrante-tabla td[data-color=""],
html[data-tema="oscuro"] .pp-cuadrante-tabla td:not([data-color]) {
  color: var(--pp-texto);
}
html[data-tema="oscuro"] .pp-cuadrante-tabla td.pp-no-laboral,
html[data-tema="oscuro"] .pp-muestra.pp-no-laboral {
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, .05) 4px 8px);
}