/* =========================================
   OU Fichaje – Front UI (mobile-first)
   ========================================= */

:root{
  /* Variables (luego las conectamos a Ajustes si quieres) */
  --oufich-radius: 14px;
  --oufich-gap: 10px;

  --oufich-border: #e6e8eb;
  --oufich-bg: #fff;
  --oufich-shadow: 0 10px 28px rgba(0,0,0,.06);

  --oufich-primary: #2271b1; /* WP blue */
  --oufich-danger:  #dc3232;
  --oufich-warn:    #ffb900;
  --oufich-ok:      #46b450;

  --oufich-text: #1d2327;
  --oufich-muted: rgba(0,0,0,.65);
}

.oufich-employee-panel{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--oufich-text);
}

/* Grid cards */
.oufich-ep-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--oufich-gap);
  margin-top: 12px;
}

/* Action buttons row/stack */
.oufich-ep-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Table scroll smooth */
.oufich-ep-tablewrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.oufich-ep-table{
  width:100%;
  border-collapse: collapse;
  font-size:13px;
  min-width: 420px;
}

/* Optional sticky bottom actions on mobile */
.oufich-ep-sticky{
  margin-top: 14px;
}

/* MÓVIL */
@media (max-width: 640px){
  .oufich-ep-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .oufich-ep-actions{
    flex-direction: column;
  }

  .oufich-ep-actions a,
  .oufich-ep-actions button{
    width:100%;
    text-align:center;
    padding: 10px 14px;
    border-radius: var(--oufich-radius);
  }

  .oufich-ep-sticky{
    position: sticky;
    bottom: 10px;
    z-index: 20;
    padding: 10px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--oufich-border);
    border-radius: var(--oufich-radius);
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
  }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 420px){
  .oufich-ep-grid{ grid-template-columns: 1fr; }
}