/* fs-employee-tools — Dark Skin unificado (botones, modales, menús, formularios) */

:root{
  --brand-primary:#0097CE; --brand-accent:#FF5B56;
  --fs-text:#E9EEF3; --fs-muted:#B8C2CC;
  --fs-surface:#0F141A; --fs-surface-2:#121920; --fs-invert:#0A0A0A;
  --fs-border:#1F2A33; --fs-radius:12px; --fs-shadow:0 10px 28px rgba(0,0,0,.55);
}

/* Tabla base */
.fs-tabla{ width:100%; border-collapse:collapse; min-width:0; color:var(--fs-text); }
.fs-tabla th, .fs-tabla td{
  padding:12px; border-bottom:1px solid var(--fs-border);
  vertical-align:middle; white-space:normal; word-break:break-word;
}
.fs-tabla th{
  text-align:left; background: linear-gradient(180deg,#111923,#0F141A);
  color:#D8E7F1; font-weight:600; font-size:13px; letter-spacing:.2px;
}
.fs-tabla td.right, .fs-tabla th.right{ text-align:right; }
.fs-msg{ margin-top:8px; font-size:13px; color:var(--fs-muted); }

/* Botones */
.fs-btn{
  background: var(--brand-primary); color:#fff;
  border:1px solid var(--brand-primary);
  border-radius:999px; padding:10px 14px; cursor:pointer; font-weight:600;
  box-shadow:0 6px 16px rgba(0,151,206,.22);
  transition: transform .2s, background .2s, box-shadow .2s, border-color .2s;
}
.fs-btn:hover{ background:#06aeea; transform: translateY(-1px); }
.fs-btn.fs-btn-outline{
  background: transparent; color: var(--fs-text);
  border:1px solid var(--fs-border);
}

/* Kebab */
.fs-kebab{
  background: var(--fs-surface-2); color:var(--fs-text);
  border:1px solid var(--fs-border); padding:8px 10px; border-radius:8px; cursor:pointer; line-height:1;
}
.fs-kebab:hover{ background:#18222B; }

/* Última celda con menú flotante */
.fs-emp-table td:last-child{ position:relative; overflow:visible; }

/* Menú flotante */
.fs-menu-floating{
  position:fixed; min-width:200px;
  background: var(--fs-surface);
  border:1px solid var(--fs-border); border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.55);
  padding:8px; z-index:2147483647; color: var(--fs-text) !important;
}
.fs-menu-floating button{
  display:block; width:100%; text-align:left;
  background:transparent; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; color: var(--fs-text);
}
.fs-menu-floating button:hover{ background:#18222B; }

/* Modal */
.fs-modal-overlay{
  position:fixed; inset:0; background: rgba(10,15,20,.6);
  display:flex; align-items:center; justify-content:center; z-index:2147483646;
  backdrop-filter: blur(6px);
}
.fs-modal{
  background: var(--fs-surface); width:min(720px,94vw);
  border-radius:12px; overflow:hidden; border:1px solid var(--fs-border);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  color: var(--fs-text);
}
.fs-modal-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background: var(--fs-surface-2); border-bottom:1px solid var(--fs-border);
}
.fs-modal-bd{ padding:14px; }
.fs-modal-ft{ display:flex; justify-content:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--fs-border); }

/* Form grid */
.fs-form-grid{ display:flex; flex-wrap:wrap; margin:-6px -8px; }
.fs-form-grid label{
  display:block; width:50%; padding:6px 8px; font-size:13px; color:var(--fs-muted); box-sizing:border-box;
}
@media (max-width:768px){ .fs-form-grid label{ width:100%; } }
.fs-form-grid label > input, .fs-form-grid label > select{
  width:100%; box-sizing:border-box; margin-top:6px; padding:10px 12px;
  border:1px solid var(--fs-border); border-radius:10px; background:#0E1319; color: var(--fs-text); font-size:14px;
  transition:border-color .2s, box-shadow .2s;
}
.fs-form-grid label > input:focus, .fs-form-grid label > select:focus{
  outline:none; border-color: var(--brand-primary);
  box-shadow:0 0 0 4px rgba(0,151,206,.18);
}

/* Invalid */
.fs-invalid{ border-color:#b91c1c !important; box-shadow:none; }

/* Ayudas */
.kv-muted{ color:var(--fs-muted); font-size:13px; }