/* apps/worker-app/styles.css
 * PR2 (@workforce/ui): reescrito para consumir tokens de src/ui/tokens.css
 * (light "claro ejecutivo luminoso" por defecto, ver index.html
 * data-theme="light") en vez de hex hardcodeado. Mobile-first (TASK-142
 * punto 1) se conserva a proposito: botones grandes para dedo, texto base
 * mas grande que el default de la capa compartida (legible a un brazo de
 * distancia) -- por eso este archivo SI overridea font-size en body.
 *
 * Todas las clases de aqui abajo siguen vivas para pantallas que este PR
 * NO toca (fichar/mi contexto/mis documentos/config dev, ver
 * result.md "Fuera de alcance"): quedan retokenizadas para que hereden el
 * look nuevo sin que su markup en src/app.js cambie una sola linea.
 */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-size: var(--wf-p-font-size-18); /* mas grande que el default (14px) de base.css, a proposito */
}

.app-header {
  display: flex;
  align-items: center;
  gap: var(--wf-space-12);
  padding: var(--wf-space-16);
  background: var(--wf-color-surface);
  color: var(--wf-color-text);
  border-bottom: 1px solid var(--wf-color-border);
}

.app-header h1 {
  font-size: var(--wf-p-font-size-24);
  margin: 0;
}

.settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Polish (responsive/tap target >=44px): 2.5rem (40px) quedaba por debajo
     del minimo tactil movil (WCAG 2.5.5 / iOS HIG / Android). 2.75rem =
     44px, mismo valor que ya usa --wf-button-height-lg en el boton de
     login (unico wf-btn--lg de la app) -- consistente con el resto del
     sistema, sin inventar un numero nuevo. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: var(--wf-radius-md);
  background: transparent;
  color: var(--wf-color-text-secondary);
  cursor: pointer;
}
.settings-link:hover {
  background: var(--wf-color-surface-sunken);
}

.screen {
  flex: 1;
  overflow-y: auto;
  padding: var(--wf-space-16);
  padding-bottom: calc(var(--wf-space-48) * 2); /* deja espacio sobre la tab-bar fija */
}

.screen h2 {
  font-size: var(--wf-p-font-size-24);
  margin-top: 0;
}

.screen h3 {
  font-size: var(--wf-p-font-size-16);
  color: var(--wf-color-text-secondary);
}

/* Polish (responsive/tap target >=44px): la altura default de .wf-btn y
   .wf-input viene de src/ui/tokens.css (--wf-button-height/--wf-input-height,
   ambos 2.5rem = 40px, vendorizados de @workforce/ui) -- por debajo del
   minimo tactil movil. Se override AQUI, en el archivo propio de
   worker-app, en vez de tocar el token compartido: cambiar el token
   afectaria tambien --wf-button-height-sm/otros usos fuera del alcance de
   esta tarea. min-height (no height) para no pelear con la altura fija que
   ya define components.css -- min-height siempre gana si es mayor. Scope
   ".screen" cubre las 5 pantallas (todas se renderizan dentro de
   <main id="screen">), no solo login/nomina/turnos: el criterio de
   responsive de la orden no esta acotado a esas 3.
   font-size en .wf-input sube de 14px a 16px (wf-p-font-size-16, token
   YA existente, no un numero inventado): por debajo de 16px, iOS Safari
   hace zoom automatico al enfocar el campo -- un salto de UX no deseado
   en un formulario movil. */
.screen .wf-btn:not(.wf-btn--lg) {
  min-height: 44px;
}
.screen .wf-input {
  min-height: 44px;
  font-size: var(--wf-p-font-size-16);
}

.hint {
  color: var(--wf-color-text-secondary);
  font-size: var(--wf-p-font-size-13);
}

/* --- botones grandes (dedo, no raton) --- heredado por config/fichar/docs
   que aun usan estas clases directamente (pantallas fuera de alcance). --- */
.btn {
  display: block;
  width: 100%;
  min-height: 56px;
  font-size: var(--wf-p-font-size-16);
  font-weight: var(--wf-p-font-weight-semibold);
  border: none;
  border-radius: var(--wf-radius-md);
  margin: var(--wf-space-8) 0;
  cursor: pointer;
  font-family: var(--wf-font-sans);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--wf-color-accent-solid);
  color: var(--wf-color-text-on-accent);
}

.btn-ack {
  min-height: 48px;
  font-size: var(--wf-p-font-size-14);
}

.btn-retry {
  background: var(--wf-color-danger-solid);
  color: var(--wf-color-text-on-accent);
  min-height: 44px;
  font-size: var(--wf-p-font-size-13);
  width: auto;
  padding: 0 var(--wf-space-16);
}

/* --- config form (pantalla dev-mode, fuera de alcance de PR2) --- */
.config-form label {
  display: block;
  margin: var(--wf-space-16) 0 var(--wf-space-4);
  font-size: var(--wf-p-font-size-14);
  color: var(--wf-color-text-secondary);
}

.config-form input {
  width: 100%;
  min-height: 48px;
  font-size: var(--wf-p-font-size-16);
  padding: var(--wf-space-8) var(--wf-space-12);
  border: 1px solid var(--wf-color-border-strong);
  border-radius: var(--wf-radius-md);
  background: var(--wf-color-surface);
  color: var(--wf-color-text);
  font-family: var(--wf-font-sans);
}

.config-form input:focus-visible {
  outline: none;
  border-color: var(--wf-input-border-focus);
  box-shadow: 0 0 0 var(--wf-focus-ring-width) var(--wf-color-accent-subtle-border);
}

/* --- mis turnos / mi nomina (dias, conceptos): .shift-card se usa junto a
   wf-card en las 2 pantallas rediseñadas, y SOLO con estas reglas propias
   (sin wf-card) en fichar/documentos (fuera de alcance) --- */
.shifts-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-12);
}

.shift-card {
  background: var(--wf-color-surface);
  border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
  padding: var(--wf-space-16);
}

.shift-date { font-size: var(--wf-p-font-size-16); font-weight: var(--wf-p-font-weight-bold); color: var(--wf-color-text); }
.shift-time { font-size: var(--wf-p-font-size-18); margin: var(--wf-space-4) 0; color: var(--wf-color-text); }
.shift-role { font-size: var(--wf-p-font-size-14); color: var(--wf-color-text-secondary); }
.shift-site { font-size: var(--wf-p-font-size-12); color: var(--wf-color-text-muted); margin-bottom: var(--wf-space-8); }

/* --- fichar (pantalla fuera de alcance de PR2, hereda tokens) --- */
.clock-status {
  font-size: var(--wf-p-font-size-18);
  text-align: center;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-color-text);
}

.clock-buttons {
  display: flex;
  gap: var(--wf-space-12);
}

.btn-clock {
  min-height: 120px;
  font-size: var(--wf-p-font-size-24);
  border-radius: var(--wf-radius-lg);
}

.btn-in { background: var(--wf-color-success); color: var(--wf-color-text-on-accent); }
.btn-out { background: var(--wf-color-danger-solid); color: var(--wf-color-text-on-accent); }

/* Polish (sin overflow horizontal): flex-wrap + overflow-wrap defensivos.
   El span combina texto fijo ("ENTRADA"/"SALIDA") con un ISO timestamp
   (`entry.params.occurredAt`, ~24 caracteres sin espacios) junto a un
   boton "Reintentar" en la misma fila -- sin wrap, un timestamp largo en
   pantalla angosta puede empujar al boton fuera del contenedor en vez de
   bajar de linea. */
.pending-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--wf-space-8);
  background: var(--wf-color-warning-subtle);
  border: 1px solid var(--wf-color-warning-subtle-border);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-space-12);
  margin-top: var(--wf-space-8);
  font-size: var(--wf-p-font-size-13);
}
.pending-card span {
  overflow-wrap: anywhere;
}

/* --- banners de honestidad (mi nomina, mi contexto) ---
   Base = tono WARNING (info incompleta / pendiente, no es un error grave).
   .banner-degraded--danger (solo usado por la nomina, chainValid:false) =
   tono DANGER -- integridad rota pesa mas que "todavia pendiente". */
.banner-degraded {
  display: flex;
  align-items: flex-start;
  gap: var(--wf-space-12);
  background: var(--wf-color-warning-subtle);
  border-left: 4px solid var(--wf-color-warning);
  border-radius: var(--wf-radius-sm);
  padding: var(--wf-space-12) var(--wf-space-16);
  margin-bottom: var(--wf-space-12);
  font-size: var(--wf-p-font-size-13);
  color: var(--wf-color-text);
}
.banner-degraded .wf-icon {
  color: var(--wf-color-warning-text);
  flex-shrink: 0;
  margin-top: 2px;
}
.banner-degraded--danger {
  background: var(--wf-color-danger-subtle);
  border-left-color: var(--wf-color-danger);
}
.banner-degraded--danger .wf-icon {
  color: var(--wf-color-danger-text);
}
.banner-degraded .wf-badge {
  margin-right: var(--wf-space-8);
}

/* --- nomina: hero del neto (count-up, ver src/ui/motion.local.js) --- */
.wf-nomina-hero {
  text-align: center;
  padding: var(--wf-space-24);
}
.wf-nomina-hero__label {
  margin: var(--wf-space-8) 0 0;
  font-size: var(--wf-p-font-size-13);
  color: var(--wf-color-text-secondary);
}
.wf-nomina-hero__amount {
  margin: var(--wf-space-4) 0 0;
  font-size: var(--wf-p-font-size-32);
  font-weight: var(--wf-p-font-weight-bold);
  color: var(--wf-color-text);
}

/* --- login: panel marca + form (layout premium) --- */
.wf-login-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.wf-login-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wf-space-8);
  padding: var(--wf-space-32) var(--wf-space-24);
  background: linear-gradient(135deg, var(--wf-color-accent-solid), var(--wf-color-accent-solid-hover));
  color: var(--wf-color-text-on-accent);
}
.wf-login-brand__mark {
  font-size: var(--wf-p-font-size-32);
  font-weight: var(--wf-p-font-weight-bold);
}
.wf-login-brand__tagline {
  margin: 0;
  font-size: var(--wf-p-font-size-14);
  opacity: 0.85;
}
.wf-login-panel {
  flex: 1;
  padding: var(--wf-space-24) var(--wf-space-16);
  background: var(--wf-color-canvas);
}
.wf-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--wf-space-16);
  max-width: 28rem;
  margin: 0 auto;
}
.wf-login-form__title {
  margin: 0;
  font-size: var(--wf-p-font-size-24);
  color: var(--wf-color-text);
}
.wf-login-error {
  display: flex;
  align-items: center;
  gap: var(--wf-space-8);
  background: var(--wf-color-danger-subtle);
  border: 1px solid var(--wf-color-danger-subtle-border);
  color: var(--wf-color-danger-text);
  padding: var(--wf-space-12) var(--wf-space-16);
  border-radius: var(--wf-radius-md);
  font-size: var(--wf-p-font-size-13);
}
.wf-login-error .wf-icon {
  flex-shrink: 0;
}

/* --- documentos (TASK-579, fuera de alcance de PR2): estado de firma,
   honestidad critica -- hereda tokens, markup sin cambios --- */
.doc-state--ok { color: var(--wf-color-success-text); font-weight: var(--wf-p-font-weight-bold); }
.doc-state--warn { color: var(--wf-color-warning-text); font-weight: var(--wf-p-font-weight-bold); }
.doc-state--neutral { color: var(--wf-color-text-secondary); font-weight: var(--wf-p-font-weight-bold); }

/* Polish (sin overflow horizontal): flex-wrap defensivo. Cuando un
   documento esta PENDING_SIGNATURE se renderizan 2 botones juntos --
   "Verificar integridad" (.btn-retry, width:auto, se dimensiona por su
   texto) y "Firmar" (.btn-ack, hereda width:100% de .btn sin overridearlo,
   ver mas abajo) -- con flex-wrap, si no caben en la misma fila en una
   pantalla angosta bajan de linea en vez de arriesgar overflow. */
.doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-space-8);
  margin-top: var(--wf-space-8);
}

.doc-detail { margin-top: var(--wf-space-8); }

.banner-invalid {
  display: flex;
  align-items: flex-start;
  gap: var(--wf-space-12);
  background: var(--wf-color-danger-subtle);
  border-left: 4px solid var(--wf-color-danger);
  color: var(--wf-color-danger-text);
  padding: var(--wf-space-12) var(--wf-space-16);
  margin-top: var(--wf-space-8);
  font-size: var(--wf-p-font-size-13);
  border-radius: var(--wf-radius-sm);
}
.banner-invalid .wf-icon {
  color: var(--wf-color-danger-text);
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- tab bar fija abajo, alcanzable con el pulgar --- */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--wf-color-surface);
  border-top: 1px solid var(--wf-color-border);
}

.tab-bar button {
  flex: 1;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wf-space-4);
  border: none;
  background: none;
  border-top: 3px solid transparent;
  color: var(--wf-color-text-secondary);
  font-size: var(--wf-p-font-size-12);
  line-height: 1.2;
  font-family: var(--wf-font-sans);
  cursor: pointer;
}

.tab-bar button .wf-icon {
  width: var(--wf-icon-size-md);
  height: var(--wf-icon-size-md);
}

.tab-bar button.active {
  color: var(--wf-color-accent);
  font-weight: var(--wf-p-font-weight-bold);
  border-top-color: var(--wf-color-accent);
}