/* TocaYAvanza v2 — Fichaje v3 Admin UI */

/* ===================== TABS ===================== */
.f3-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-5);
  gap: 2px;
  overflow-x: auto;
}

.f3-tab {
  padding: 10px var(--space-5);
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.f3-tab:hover  { color: var(--primary); }
.f3-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--fw-semibold); }

/* ===================== ESTADOS GENÉRICOS ===================== */
.f3-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10);
  color: var(--text-muted);
  justify-content: center;
}

.f3-error {
  padding: var(--space-4);
  background: var(--danger-subtle);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-sm);
  color: #991b1b;
  margin: var(--space-4) 0;
}

.f3-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px var(--space-5);
  gap: var(--space-3);
  color: var(--text-muted);
}
.f3-empty-icon { font-size: 48px; }

/* ===================== COLA — HEADER ===================== */
.f3-cola-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.f3-count-badge {
  background: var(--primary);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: 20px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.f3-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.f3-filter-select {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--text-sm);
  font-family: inherit;
  background: var(--card);
  cursor: pointer;
}

.f3-kb-hint { font-size: var(--text-xs); color: var(--text-subtle); margin-left: auto; }

.f3-btn-batch-approve {
  background: #166534;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.f3-btn-batch-approve:hover { background: #14532d; }

.f3-kb-hint kbd {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: var(--text-xs);
  font-family: monospace;
}

/* ===================== COLA — CARDS ===================== */
.f3-cola-list { display: flex; flex-direction: column; gap: 10px; }

.f3-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-4);
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid transparent;
  transition: box-shadow 0.15s, opacity 0.2s;
  cursor: default;
  overflow: hidden;
}
.f3-card:focus:not(:focus-visible) { outline: none; }
.f3-card-focused {
  box-shadow: 0 0 0 2px var(--primary), var(--shadow-sm);
}

.f3-card-he       { border-left-color: var(--warning); }
.f3-card-excepcion { border-left-color: var(--primary); }

.f3-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-subtle);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  flex-shrink: 0;
}

.f3-card-body { flex: 1; min-width: 0; }

.f3-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.f3-prof-name { font-weight: var(--fw-semibold); font-size: var(--text-base); }

.f3-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-he        { background: var(--warning-subtle); color: #92400e; }
.badge-excepcion { background: var(--primary-subtle); color: var(--primary); }

.f3-card-date  { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 2px; }
.f3-card-type  { font-size: var(--text-sm); color: var(--text); }
.f3-card-notes {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card acciones */
.f3-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-items: stretch;
  min-width: 140px;
}

.f3-he-resolution { display: flex; flex-direction: column; gap: 6px; }

.f3-res-select {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1) 6px;
  font-size: var(--text-xs);
  font-family: inherit;
  background: var(--card);
  width: 100%;
}

.f3-btn-approve {
  height: 44px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  width: 100%;
}
.f3-btn-approve:hover { background: #bbf7d0; }

.f3-btn-reject {
  height: 44px;
  background: var(--danger-subtle);
  color: #991b1b;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  width: 100%;
}
.f3-btn-reject:hover { background: #fecaca; }

/* ===================== MODAL RECHAZAR ===================== */
.f3-reject-modal { max-width: 480px; width: 100%; }

.f3-reject-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}

.f3-req { color: var(--danger); }

.f3-reject-textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: var(--text-sm);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.f3-reject-textarea:focus {
  outline: 2px solid var(--primary);
  border-color: transparent;
}

.f3-reject-error { margin-top: var(--space-2); color: var(--danger); font-size: var(--text-xs); }

.f3-btn-reject-confirm {
  background: var(--danger);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: inherit;
}

/* ===================== EQUIPO — TABLA ===================== */
.f3-equipo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.f3-month-nav { display: flex; align-items: center; gap: 10px; }

.f3-nav-btn {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.f3-nav-btn:hover { background: var(--bg); }

.f3-month-label {
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  min-width: 150px;
  text-align: center;
  text-transform: capitalize;
}

.f3-today-btn {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
}

.f3-export-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--fw-medium);
}

.f3-btn-precheck {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--fw-medium);
  transition: background 0.15s;
}
.f3-btn-precheck:hover { background: #dcfce7; }

.f3-equipo-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
}

.f3-equipo-table { border-collapse: collapse; width: 100%; min-width: max-content; }

.f3-col-prof {
  min-width: 140px;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  background: var(--bg);
  border-right: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 1;
}
.f3-equipo-table thead .f3-col-prof { border-bottom: 2px solid var(--border-strong); }

.f3-day-th {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  padding: var(--space-1) 2px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: var(--bg);
  border-bottom: 2px solid var(--border-strong);
}
.f3-day-th.f3-weekend   { color: var(--border-strong); }
.f3-day-th.f3-week-start { border-left: 2px solid var(--border-strong); }

.f3-cell {
  width: 32px;
  height: 32px;
  padding: 0;
  text-align: center;
  cursor: default;
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
}
.f3-cell.f3-week-start { border-left: 2px solid var(--border-strong); }

.f3-cell-ok     { background: #dcfce7; }
.f3-cell-amber  { background: #fef3c7; }
.f3-cell-red    { background: #fee2e2; }
.f3-cell-purple { background: var(--primary-subtle); }
.f3-cell-grey   { background: var(--bg); }
.f3-cell-empty  { background: #fafafa; }

/* HE pendiente: outline azul sobre cualquier color de fondo */
.f3-cell-he { outline: 2px solid var(--info); outline-offset: -3px; }

/* Fila alterna */
.f3-equipo-table tbody tr:nth-child(even) .f3-col-prof { background: var(--bg); }

/* Leyenda */
.f3-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.f3-legend-item { display: flex; align-items: center; gap: 6px; }
.f3-legend-dot  { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }

/* ===================== EXPORTAR INSPECCIÓN ===================== */
.f3-export-form-section {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.f3-section-title {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4) 0;
  color: var(--text);
}

.f3-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.f3-form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: 6px;
}

.f3-input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 10px;
  font-size: var(--text-sm);
  font-family: inherit;
  box-sizing: border-box;
}
.f3-input:focus { outline: 2px solid var(--primary); border-color: transparent; }

.f3-radio-group {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding-top: var(--space-1);
}
.f3-radio-group label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 0;
}
.f3-radio-group input[disabled] + span,
.f3-radio-group input:disabled ~ * { opacity: 0.4; }

.f3-btn-generate {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.f3-btn-generate:hover    { opacity: 0.9; }
.f3-btn-generate:disabled { opacity: 0.6; cursor: not-allowed; }

.f3-exports-history { margin-top: var(--space-6); }
.f3-exports-empty   { color: var(--text-muted); font-size: var(--text-sm); }

.f3-export-pending-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-4);
  padding: 14px var(--space-4);
  background: var(--warning-subtle);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
}
.f3-notice-icon { font-size: 18px; color: #d97706; flex-shrink: 0; margin-top: 1px; }
.f3-export-pending-notice p {
  margin: 0;
  font-size: var(--text-sm);
  color: #92400e;
  line-height: 1.5;
}
.f3-export-pending-notice code {
  background: #fef3c7;
  border-radius: 3px;
  padding: 1px var(--space-1);
  font-family: monospace;
  font-size: var(--text-xs);
}

.f3-export-card {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.f3-export-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--space-4);
  gap: var(--space-3);
}
.f3-export-title   { font-weight: var(--fw-semibold); font-size: var(--text-base); }
.f3-export-meta    { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.f3-export-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.f3-btn-download {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--fw-medium);
}

.f3-export-preview {
  overflow-x: auto;
  border-top: 1px solid var(--border);
  max-height: 400px;
  overflow-y: auto;
}

.f3-export-table { border-collapse: collapse; width: 100%; font-size: var(--text-xs); }
.f3-export-table th {
  background: var(--bg);
  padding: var(--space-2) 10px;
  text-align: left;
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.f3-export-table td { padding: 6px 10px; border-bottom: 1px solid var(--bg); }

.f3-delta-pos { color: #166534; font-weight: var(--fw-medium); }
.f3-delta-neg { color: #991b1b; font-weight: var(--fw-medium); }

.f3-more-rows { text-align: center; color: var(--text-muted); font-style: italic; padding: 10px; }

/* ===================== CRON HEALTH ===================== */
.f3-cron-panel {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.f3-cron-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}
.f3-cron-table th {
  background: var(--bg);
  padding: var(--space-2) var(--space-4);
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
.f3-cron-table td {
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.f3-cron-row-error td { background: #fff5f5; }

.f3-cron-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.f3-cron-error-msg {
  font-size: var(--text-xs);
  color: #991b1b;
  margin-top: 4px;
  font-family: monospace;
  background: #fff5f5;
  padding: 2px 6px;
  border-radius: 3px;
}

.f3-cron-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.f3-cron-ok      { background: #dcfce7; color: #166534; }
.f3-cron-error   { background: var(--danger-subtle); color: #991b1b; }
.f3-cron-running { background: var(--primary-subtle); color: var(--primary); }
.f3-cron-never   { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.f3-cron-rows { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.f3-cron-age-warn { color: #d97706; font-size: var(--text-xs); font-weight: var(--fw-medium); }

/* ===================== SPINNER ===================== */
.f3-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: f3-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes f3-spin { to { transform: rotate(360deg); } }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .f3-card { flex-direction: column; gap: 10px; }
  .f3-card-actions { flex-direction: row; min-width: unset; width: 100%; }
  .f3-btn-approve, .f3-btn-reject { flex: 1; }
  .f3-he-resolution { width: 100%; }
  .f3-kb-hint { display: none; }
  .f3-equipo-wrapper { display: none; }
  .f3-equipo-mobile-msg {
    display: block;
    padding: var(--space-5);
    background: var(--card);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
  }
  .f3-cola-header { flex-direction: column; align-items: flex-start; }
  .f3-form-grid   { grid-template-columns: 1fr; }
  .f3-export-card-header { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 769px) {
  .f3-equipo-mobile-msg { display: none; }
}

/* === Pestaña Pendientes de aprobación === */

/* Badge numérico en la pestaña — círculo rojo sobrio */
.f3-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: #c0392b;
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  border-radius: 9px;
  vertical-align: middle;
  line-height: 1;
  box-sizing: border-box;
}

/* Badges de tipo de evento */
.f3-pending-type-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.f3-ptype-IN        { background: #dcfce7; color: #166534; }
.f3-ptype-OUT       { background: var(--danger-subtle); color: #991b1b; }
.f3-ptype-BREAK_IN  { background: var(--warning-subtle); color: #92400e; }
.f3-ptype-BREAK_OUT { background: var(--primary-subtle); color: var(--primary); }

/* Modal de aprobación */
.f3-approve-modal { max-width: 480px; width: 100%; }

/* Bloque de resumen read-only en modales */
.f3-pending-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) 14px;
  margin-bottom: var(--space-4);
}
.f3-pending-summary p {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text);
}
.f3-pending-summary p:last-child { margin-bottom: 0; }

/* Motivo del profesional en modal aprobar (read-only, cursiva) */
.f3-pending-reason {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 10px;
  font-size: var(--text-sm);
  color: var(--text);
  font-style: italic;
  margin-top: 2px;
  line-height: 1.5;
}

/* ===================== LIVE PANEL (EQUIPO EN TIEMPO REAL) ===================== */

.f3-live-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: flex-start;
}

.f3-live-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.f3-live-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--space-1);
  flex-shrink: 0;
}

.f3-live-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.f3-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  cursor: default;
  white-space: nowrap;
}

.f3-chip-working { background: #dcfce7; color: #166534; }
.f3-chip-break   { background: #fef3c7; color: #92400e; }
.f3-chip-done    { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.f3-chip-absent  { background: #f3f4f6; color: #9ca3af; border: 1px dashed var(--border); }

/* Alerts section */
.f3-live-alerts { flex-wrap: wrap; gap: 6px; }

.f3-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.f3-alert-orange { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }
.f3-alert-red    { background: var(--danger-subtle); color: #991b1b; border: 1px solid #fca5a5; }
.f3-alert-yellow { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }

/* Closure badges */
.f3-closure-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.f3-closure-badge.locked   { background: #1e3a5f; color: white; }
.f3-closure-badge.exported { background: #5b21b6; color: white; }
.f3-closure-badge.closed   { background: #166534; color: white; }
.f3-closure-badge.open     { background: var(--warning-subtle); color: #92400e; }

/* ===================== EQUIPO — BADGES POR PROFESIONAL ===================== */

.f3-prof-name-cell { font-weight: var(--fw-medium); }

.f3-cs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  vertical-align: middle;
  line-height: 1;
  cursor: default;
}

.f3-cs-open     { background: var(--warning-subtle); color: #92400e; }
.f3-cs-closed   { background: #dcfce7; color: #166534; }
.f3-cs-exported { background: #ede9fe; color: #5b21b6; }
.f3-cs-locked   { background: #1e3a5f; color: white; }
.f3-cs-violation { background: #fff7ed; color: #c2410c; }
.f3-cs-he        { background: var(--warning-subtle); color: #92400e; }
.f3-cs-danger    { background: var(--danger); color: white; }

/* ===================== HE — VIOLATION CARDS ===================== */

.f3-card-violation { border-left-color: #ef4444; }

.badge-violation { background: #fee2e2; color: #991b1b; }

.f3-btn-ack {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  font-weight: var(--fw-semibold);
}
.f3-btn-ack:hover { background: #e0f2fe; }

.f3-yearly-warn {
  font-size: var(--text-xs);
  color: #991b1b;
  margin-top: 4px;
  font-weight: var(--fw-medium);
}

/* ===================== INFORME BRECHA SALARIAL ===================== */

.f3-genero-controls {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.f3-genero-controls .f3-input { min-width: 120px; }

/* Aviso cuando no hay género registrado en ningún profesional */
.f3-genero-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.5;
}
.f3-genero-info-icon { flex-shrink: 0; }

.f3-gender-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.f3-gender-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  /* La barra de acento va como inset box-shadow para respetar el border-radius
     (un border-top inline deja una muesca diagonal en las esquinas) */
  box-shadow: inset 0 3px 0 0 var(--accent, #d1d5db), 0 1px 3px rgba(0,0,0,.06);
}

.f3-gender-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  color: var(--accent, #6b7280);
}

.f3-gender-count {
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  margin-bottom: 14px;
}

.f3-gender-count-label {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}

.f3-gender-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

/* Layout apilado: etiqueta arriba, valor abajo — evita que cifras como
   "792,28 €/mes" se partan en dos líneas en tarjetas estrechas */
.f3-gender-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.f3-gsk { font-size: 11px; color: #6b7280; line-height: 1.3; }
.f3-gsv { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.25; }

/* Indicador de brecha */
.f3-genero-gap {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.f3-gap-ok    { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.f3-gap-alert { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.f3-gap-label { font-weight: 500; }
.f3-gap-dir   { font-style: italic; }
.f3-gap-note  { color: #9ca3af; font-size: 11px; margin-left: 6px; }

/* Pills de género */
.f3-gender-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.f3-gender-M  { background: #dbeafe; color: #1d4ed8; }
.f3-gender-F  { background: #fce7f3; color: #9d174d; }
.f3-gender-X  { background: #ede9fe; color: #5b21b6; }
.f3-gender-nd { background: #f3f4f6; color: #6b7280; }

/* Tabla de detalle */
.f3-genero-table-wrapper {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 16px;
}

.f3-genero-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.f3-genero-table thead tr {
  background: #f9fafb;
}

.f3-genero-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.f3-genero-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: middle;
}

.f3-genero-table tbody tr:last-child td { border-bottom: none; }
.f3-genero-table tbody tr:hover td { background: #f9fafb; }
.f3-gt-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Nota legal */
.f3-genero-nota {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.6;
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px solid #f3f4f6;
}