/* ============================================================================
   FBF Panel — Barra de acciones y formulario de alta plegable
   ----------------------------------------------------------------------------
   Acompaña a assets/js/panel-registro.js. El módulo reordena el DOM que ya
   existe; esta hoja le da la forma. Se carga después de admin-refino.css y usa
   sus tokens (--ad-*), por eso no redefine radios ni elevaciones.
   ============================================================================ */

/* ---------- Barra de acciones ----------
   Queda entre el héroe y los listados. Es lo primero accionable de la pestaña
   y por eso se pega arriba al hacer scroll: dar de alta un registro no puede
   depender de volver al principio de una lista de 300 filas. */
.admin-workspace-body .rg-acciones {
  position: sticky;
  top: 92px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 16px;
  padding: 10px;
  border: 1px solid rgba(6, 44, 31, .10);
  border-radius: var(--ad-r-md, 18px);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--ad-e2, 0 2px 4px rgba(6,44,31,.07), 0 10px 24px rgba(6,44,31,.07));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.admin-workspace-body .rg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, #0e7d52, #14a067);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: var(--ad-e2, 0 2px 4px rgba(6,44,31,.07)), inset 0 1px 0 rgba(255, 255, 255, .26);
  transition: transform .2s cubic-bezier(.34, 1.35, .48, 1), filter .2s ease, box-shadow .2s ease;
}
.admin-workspace-body .rg-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.admin-workspace-body .rg-btn:active { transform: translateY(0) scale(.98); }
.admin-workspace-body .rg-btn svg { flex: none; }

/* A partir del segundo botón de la misma pestaña (por ejemplo Selecciones,
   que tiene convocatoria y partido), el resto es secundario: una sola acción
   primaria por pantalla, si no ninguna lo parece. */
.admin-workspace-body .rg-btn ~ .rg-btn {
  background: #fff;
  color: #0b2b20;
  border-color: rgba(6, 44, 31, .16);
  box-shadow: none;
}
.admin-workspace-body .rg-btn ~ .rg-btn:hover { border-color: #14a067; color: #0e7d52; filter: none; }

/* ---------- Formulario de alta, plegado al final ---------- */
.admin-workspace-body .rg-alta {
  margin-top: 26px;
  padding: 18px;
  border: 1px solid rgba(20, 160, 103, .30);
  border-radius: var(--ad-r-lg, 24px);
  background: linear-gradient(160deg, rgba(20, 160, 103, .05), rgba(255, 255, 255, 0));
  scroll-margin-top: 150px;
}
.admin-workspace-body .rg-alta[hidden] { display: none !important; }

.admin-workspace-body .rg-alta > .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.admin-workspace-body .rg-cerrar {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(6, 44, 31, .16);
  border-radius: 999px;
  background: #fff;
  color: #3a5548;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.admin-workspace-body .rg-cerrar:hover { border-color: #c62d38; color: #c62d38; }

/* La apertura se anuncia con un movimiento corto. Un formulario de 24 campos
   que aparece de golpe desorienta: el desplazamiento vertical indica de dónde
   salió. */
.admin-workspace-body .rg-alta.is-open { animation: rg-abrir .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes rg-abrir {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Héroe más compacto ----------
   Los banners ocupaban casi media pantalla antes del primer dato útil. Se
   conservan —dan contexto a quien entra por primera vez— pero ceden altura. */
.admin-workspace-body .subpanel .management-hero,
.admin-workspace-body .subpanel .sport-command {
  padding: 20px 22px !important;
  margin-bottom: 0 !important;
}
.admin-workspace-body .subpanel .management-hero h2,
.admin-workspace-body .subpanel .sport-command h2 {
  font-size: clamp(19px, 2.2vw, 25px) !important;
  margin: 6px 0 5px !important;
}
.admin-workspace-body .subpanel .management-hero p,
.admin-workspace-body .subpanel .sport-command p {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

@media (max-width: 900px) {
  .admin-workspace-body .rg-acciones { top: 6px; }
  .admin-workspace-body .rg-btn { flex: 1 1 auto; justify-content: center; }
  /* En pantalla chica el párrafo del héroe es puro scroll antes del dato. */
  .admin-workspace-body .subpanel .management-hero p,
  .admin-workspace-body .subpanel .sport-command p { display: none !important; }
}

@media (pointer: coarse) {
  .admin-workspace-body .rg-cerrar { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-workspace-body .rg-alta.is-open { animation: none; }
}

@media print {
  .admin-workspace-body .rg-acciones,
  .admin-workspace-body .rg-cerrar { display: none !important; }
  .admin-workspace-body .rg-alta[hidden] { display: none !important; }
}

/* La región recibe el foco al abrirse (ver panel-registro.js). Sin esta regla
   el navegador dibujaría su anillo por defecto alrededor de todo el bloque,
   que aquí no aporta nada: el borde verde y la animación ya señalan el cambio. */
.admin-workspace-body .rg-alta:focus { outline: none; }
.admin-workspace-body .rg-alta:focus-visible { outline: 2px solid #0e7d52; outline-offset: 3px; }