:root {
  --wayhr-blue: #003580;
  --wayhr-white: #ffffff;
  --wayhr-bg: #f3f6fb;
  --wayhr-border: #d6deea;
  --wayhr-text: #1f2937;
  --wayhr-muted: #6b7280;
  --wayhr-danger: #b91c1c;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--wayhr-text);
  background: var(--wayhr-bg);
}

button {
  font-family: inherit;
}

.wayhr-app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 64px 1fr 32px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "status";
}

.wayhr-header {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--wayhr-blue);
  color: var(--wayhr-white);
}

.wayhr-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wayhr-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid var(--wayhr-white);
  font-weight: 700;
  letter-spacing: 1px;
}

.wayhr-title {
  font-size: 22px;
  font-weight: 700;
}

.wayhr-header-actions {
  display: flex;
  gap: 10px;
}

.wayhr-menu-button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--wayhr-white);
  background: transparent;
  color: var(--wayhr-white);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.wayhr-menu-button-exit {
  background: rgba(255, 255, 255, 0.14);
}

.wayhr-main {
  grid-area: main;
  min-height: 0;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "staff action";
}

.wayhr-staff-zone {
  grid-area: staff;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

.wayhr-staff-grid {
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--staff-grid-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--staff-grid-rows, 4), minmax(110px, 1fr));
  gap: 12px;
}

.wayhr-staff-button {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 16px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.wayhr-action-zone {
  grid-area: action;
  min-width: 0;
  min-height: 0;
  padding: 16px 16px 16px 0;
}

.wayhr-action-card {
  height: 100%;
  padding: 20px;
  background: var(--wayhr-white);
  border: 1px solid var(--wayhr-border);
  display: grid;
  align-content: start;
  gap: 12px;
}

.wayhr-action-card h1 {
  margin: 0;
  font-size: 24px;
}

.wayhr-action-card p {
  margin: 0;
  color: var(--wayhr-muted);
  font-size: 17px;
}

.wayhr-selected-staff {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 800;
}

.wayhr-loading,
.wayhr-error,
.wayhr-empty {
  padding: 24px;
  background: var(--wayhr-white);
  border: 1px solid var(--wayhr-border);
  font-size: 20px;
}

.wayhr-error {
  color: var(--wayhr-danger);
}

.wayhr-status-bar {
  grid-area: status;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #e5eaf3;
  border-top: 1px solid var(--wayhr-border);
  font-size: 14px;
}

/* =========================
   Panel derecho · CSS Grid
   ========================= */

.wayhr-control-panel {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "control_header"
    "selected_card"
    "pin_panel";
  gap: 14px;
}

.wayhr-control-header {
  grid-area: control_header;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
}

.wayhr-selected-card {
  grid-area: selected_card;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--wayhr-border);
  background: #f8fafc;
}

.wayhr-selected-label {
  font-size: 14px;
  color: var(--wayhr-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.wayhr-selected-staff {
  min-height: 34px;
  font-size: 22px;
  font-weight: 800;
}

/* =========================
   Panel PIN · CSS Grid
   ========================= */

.wayhr-hidden {
  display: none !important;
}

.wayhr-pin-panel {
  grid-area: pin_panel;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "pin_display"
    "pin_keypad"
    "pin_feedback";
  gap: 14px;
}

.wayhr-pin-display-area {
  grid-area: pin_display;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
}

.wayhr-pin-display-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--wayhr-muted);
  text-transform: uppercase;
}

.wayhr-pin-display-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

.wayhr-pin-display {
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid var(--wayhr-border);
  background: #ffffff;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 10px;
}

.wayhr-pin-visibility-button {
  min-width: 112px;
  border: 1px solid var(--wayhr-border);
  background: #ffffff;
  color: var(--wayhr-text);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.wayhr-pin-keypad {
  grid-area: pin_keypad;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(64px, 1fr));
  gap: 10px;
}

.wayhr-pin-key {
  border: 1px solid var(--wayhr-border);
  background: #ffffff;
  color: var(--wayhr-text);
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
}

.wayhr-pin-key:active {
  transform: translateY(1px);
  box-shadow: none;
}

.wayhr-pin-key-delete {
  font-size: 18px;
  background: #fff7ed;
}

.wayhr-pin-key-accept {
  font-size: 18px;
  background: #dcfce7;
}

.wayhr-pin-feedback {
  grid-area: pin_feedback;
  min-height: 38px;
  display: grid;
  align-items: center;
}

.wayhr-pin-message {
  font-size: 16px;
  font-weight: 800;
}

.wayhr-pin-message.is-error {
  color: var(--wayhr-danger);
}

.wayhr-pin-message.is-ok {
  color: #15803d;
}

/* =========================
   Panel derecho · CSS Grid
   ========================= */

.wayhr-control-panel {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "control_header"
    "selected_card"
    "pin_panel";
  gap: 14px;
}

.wayhr-control-header {
  grid-area: control_header;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
}

.wayhr-selected-card {
  grid-area: selected_card;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--wayhr-border);
  background: #f8fafc;
}

.wayhr-selected-label {
  font-size: 14px;
  color: var(--wayhr-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.wayhr-selected-staff {
  min-height: 34px;
  font-size: 22px;
  font-weight: 800;
}

/* =========================
   Panel PIN · CSS Grid
   ========================= */

.wayhr-hidden {
  display: none !important;
}

.wayhr-pin-panel {
  grid-area: pin_panel;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "pin_display"
    "pin_keypad"
    "pin_feedback";
  gap: 14px;
}

.wayhr-pin-display-area {
  grid-area: pin_display;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
}

.wayhr-pin-display-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--wayhr-muted);
  text-transform: uppercase;
}

.wayhr-pin-display-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

.wayhr-pin-display {
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid var(--wayhr-border);
  background: #ffffff;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 10px;
}

.wayhr-pin-visibility-button {
  min-width: 112px;
  border: 1px solid var(--wayhr-border);
  background: #ffffff;
  color: var(--wayhr-text);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.wayhr-pin-keypad {
  grid-area: pin_keypad;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(64px, 1fr));
  gap: 10px;
}

.wayhr-pin-key {
  border: 1px solid var(--wayhr-border);
  background: #ffffff;
  color: var(--wayhr-text);
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
}

.wayhr-pin-key:active {
  transform: translateY(1px);
  box-shadow: none;
}

.wayhr-pin-key-delete {
  font-size: 18px;
  background: #fff7ed;
}

.wayhr-pin-key-accept {
  font-size: 18px;
  background: #dcfce7;
}

.wayhr-pin-feedback {
  grid-area: pin_feedback;
  min-height: 38px;
  display: grid;
  align-items: center;
}

.wayhr-pin-message {
  font-size: 16px;
  font-weight: 800;
}

.wayhr-pin-message.is-error {
  color: var(--wayhr-danger);
}

.wayhr-pin-message.is-ok {
  color: #15803d;
}

/* =========================
   Ajustes visuales fichador
   ========================= */

.wayhr-staff-button {
  padding: 30px 10px;
}

/* Separación visual entre zona de empleados y zona de fichaje */
.wayhr-action-zone {
  padding: 16px;
  background: #e8eef8;
  border-left: 6px solid var(--wayhr-blue);
}

.wayhr-action-card {
  height: 100%;
  padding: 20px;
  background: var(--wayhr-white);
  border: 1px solid var(--wayhr-border);
  display: grid;
  align-content: stretch;
  gap: 12px;
}

/* =========================
   Ajuste tamaño botones empleados
   ========================= */

.wayhr-staff-grid {
  align-content: start;
  grid-template-rows: repeat(var(--staff-grid-rows, 4), minmax(135px, 170px));
}

.wayhr-staff-button {
  min-height: 135px;
  height: auto;
  padding: 30px 10px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1.15;
}

/* =========================
   Corrección: mantener tamaño de botones y aumentar separación
   ========================= */

.wayhr-staff-grid {
  align-content: stretch;
  grid-template-rows: repeat(var(--staff-grid-rows, 4), minmax(110px, 1fr));
  gap: 24px;
}

.wayhr-staff-button {
  height: 100%;
  min-height: 0;
  padding: 30px 10px;
  display: grid;
  place-items: center;
}

/* =========================
   Rejilla definitiva empleados
   4 columnas x mínimo 4 filas
   Botón centrado dentro de cada celda
   ========================= */

.wayhr-staff-zone {
  padding: 0;
  overflow: auto;
}

.wayhr-staff-grid {
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(var(--staff-grid-cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--staff-grid-rows, 4), minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 30px;
  align-items: center;
  justify-items: stretch;
  align-content: stretch;
}

.wayhr-staff-button {
  width: 100%;
  height: 33.333%;
  min-height: 72px;
  max-height: 120px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

/* =========================
   Corrección separación real entre filas de empleados
   ========================= */

.wayhr-staff-grid {
  height: auto;
  min-height: 0;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(var(--staff-grid-cols, 4), minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: 128px;
  column-gap: 30px;
  row-gap: 30px;
  align-content: start;
  align-items: stretch;
  justify-items: stretch;
}

.wayhr-staff-button {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0 10px;
  display: grid;
  place-items: center;
}

/* =========================
   Teclado PIN con teclas cuadradas
   ========================= */

.wayhr-pin-keypad {
  align-content: start;
  justify-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 10px;
}

.wayhr-pin-key {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  height: auto;
  padding: 0;
  display: grid;
  place-items: center;
}

.wayhr-pin-key-delete,
.wayhr-pin-key-accept {
  font-size: 17px;
}

/* =========================
   PIN integrado en el mismo grid que el teclado
   ========================= */

.wayhr-pin-panel {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "pin_keypad"
    "pin_feedback";
  gap: 14px;
}

.wayhr-pin-keypad {
  grid-area: pin_keypad;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 10px;
  align-content: start;
  justify-items: stretch;
}

.wayhr-pin-display {
  grid-column: span 2;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 0;
  height: auto;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wayhr-border);
  background: #ffffff;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 10px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
}

.wayhr-pin-visibility-button {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wayhr-border);
  background: #ffffff;
  color: var(--wayhr-text);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
}

.wayhr-pin-key {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  height: auto;
  padding: 0;
  display: grid;
  place-items: center;
}

.wayhr-pin-feedback {
  grid-area: pin_feedback;
}

/* =========================
   Ajuste celda Ver PIN
   ========================= */

.wayhr-pin-visibility-button {
  aspect-ratio: auto;
  height: 100%;
  align-self: stretch;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e3a8a;
  display: grid;
  place-items: center;
  line-height: 1;
}

.wayhr-pin-visibility-button:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* =========================
   Barra superior optimizada para tablet
   ========================= */

.wayhr-app {
  grid-template-rows: 86px 1fr 36px;
}

.wayhr-header {
  padding: 0 22px;
}

.wayhr-logo {
  width: 58px;
  height: 58px;
  font-size: 22px;
}

.wayhr-title {
  font-size: 28px;
}

.wayhr-header-actions {
  gap: 14px;
}

.wayhr-menu-button {
  min-height: 58px;
  padding: 0 24px;
  font-size: 18px;
}