/* ============================================================
   smgr · css/pages/fergetxo.css — EL ANÁLISIS DE FERGETXO
   Compartido por la página pública (analisis_fergetxo.php) y el
   editor admin (fergetxo.php). Tokens en tokens.css; .btn/.card/
   .table/.pos-badge/.up/.down en rincon.css. La CSS del editor
   WYSIWYG viene del CDN de Summernote-lite; aquí solo se ajusta
   el marco para encajar con la paleta clara.
   ============================================================ */

/* Botón pequeño (definido por página en Foco). */
.btn--sm { padding: 6px 12px; font-size: 13px; }

/* ============================================================
   PÁGINA PÚBLICA
   ============================================================ */
.fgx-head { margin-top: var(--sp-5); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.fgx-head h1 { font-size: 30px; line-height: 1.1; }
.fgx-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }

.fgx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}
.fgx-main { min-width: 0; }
.fgx-section { margin-top: var(--sp-6); }
.fgx-section:first-child { margin-top: var(--sp-5); }

.fgx-empty { padding: var(--sp-5); }

/* ---------- Índice de escudos ---------- */
.fgx-index {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-4);
}
.fgx-index__team {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  width: 58px; text-decoration: none; color: var(--muted);
  font-size: 11px; font-weight: 700;
}
.fgx-index__team img { width: 40px; height: 45px; object-fit: contain; }
.fgx-index__team:hover { color: var(--ink); }

/* ---------- Bloque por equipo ---------- */
.fgx-team__head h2 { display: inline-flex; align-items: center; gap: 8px; }
.fgx-team__head h2 img { width: 28px; height: 28px; object-fit: contain; }

/* ---------- Tabla de plantilla (densa, para que quepan las 10 columnas) ---------- */
.fgx-roster-wrap { padding: var(--sp-1); overflow-x: auto; margin-bottom: var(--sp-3); }
.fgx-roster { width: 100%; min-width: 0; font-size: 12px; }
.fgx-roster th, .fgx-roster td { padding: 5px 7px; }
/* Nombre siempre abreviado ("N. Apellido") en esta tabla densa. */
.fgx-roster .pname-full { display: none; }
.fgx-roster .pname-abbr { display: inline; }
.fgx-roster .player-cell { gap: 5px; }
.fgx-roster td.up, .fgx-roster td.down { font-weight: 700; }
.fgx-roster td.up { color: var(--up); }
.fgx-roster td.down { color: var(--down); }
.fgx-roster td.c-up { color: var(--up); }
.fgx-roster .pos-badge { width: 20px; height: 20px; font-size: 10px; }

/* Próximos 3 rivales (chip escudo + sede, coloreado por dificultad). */
.fgx-next3 { display: inline-flex; align-items: center; gap: 3px; }
.fgx-nx {
  display: inline-flex; align-items: center; gap: 1px;
  padding: 1px 3px; border-radius: 6px; background: var(--zebra);
  font-size: 9px; font-weight: 700; color: var(--muted);
}
.fgx-nx .loc { font-style: normal; }
.fgx-nx img { width: 14px; height: 14px; object-fit: contain; }
.fgx-nx.up   { background: var(--up-tint);   color: var(--up); }
.fgx-nx.down { background: var(--down-tint); color: var(--down); }
.fgx-nx--empty { background: transparent; }

/* Últimas 5 jornadas (SM por partido, coloreado vs media). */
.fgx-form5 { display: inline-flex; align-items: center; gap: 2px; }
.fgx-g {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 2px 3px; border-radius: 5px;
  background: var(--zebra); font-size: 10px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fgx-g.up   { background: var(--up-tint);   color: var(--up); }
.fgx-g.down { background: var(--down-tint); color: var(--down); }
.fgx-g--none { color: var(--line); background: transparent; }

/* Bajo ~760px (móvil / columna estrecha) el wrapper permite scroll horizontal. */
@media (max-width: 760px) {
  .fgx-roster { min-width: 620px; }
}

/* ---------- Contenido HTML del análisis (texto de confianza) ---------- */
.fgx-prose {
  padding: var(--sp-5);
  font-size: 15px; line-height: 1.65; color: var(--ink);
}
.fgx-prose > :first-child { margin-top: 0; }
.fgx-prose > :last-child { margin-bottom: 0; }
.fgx-prose p { margin: 0 0 var(--sp-3); }
.fgx-prose h1, .fgx-prose h2, .fgx-prose h3, .fgx-prose h4 {
  margin: var(--sp-4) 0 var(--sp-2); line-height: 1.2;
}
.fgx-prose ul, .fgx-prose ol { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
.fgx-prose li { margin-bottom: 4px; }
.fgx-prose a { color: var(--accent-deep); font-weight: 600; }
.fgx-prose a:hover { text-decoration: underline; }
.fgx-prose img {
  max-width: 100%; height: auto; border-radius: var(--r-input);
  margin: var(--sp-2) 0; display: block;
}
.fgx-prose table { max-width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; }
.fgx-prose td, .fgx-prose th { border: 1px solid var(--line); padding: 6px 10px; }
.fgx-prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

/* ---------- Lateral ---------- */
.fgx-aside { min-width: 0; }
.fgx-links { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.fgx-link {
  display: block; text-align: center; text-decoration: none;
  padding: 10px 14px; border-radius: var(--r-input); font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); color: var(--ink); background: var(--surface);
}
.fgx-link:hover { background: var(--hover); text-decoration: none; }
.fgx-link--tg { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
.fgx-link--tg:hover { background: var(--accent-soft); opacity: .85; }
.fgx-link--consejos { background: var(--ink); color: #fff; border-color: transparent; }
.fgx-link--consejos:hover { background: var(--ink); opacity: .9; }

.fgx-jornadas { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4); }
.fgx-jchip {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--zebra); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.fgx-jchip:hover { background: var(--hover); text-decoration: none; }

@media (max-width: 900px) {
  .fgx-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   EDITOR ADMIN
   ============================================================ */
.fgx-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-6);
  align-items: start;
}
.fgx-editor { min-width: 0; margin-top: var(--sp-5); }
.fgx-manage { min-width: 0; margin-top: var(--sp-5); }

/* ---------- Banner de estado ---------- */
.fgx-banner {
  padding: 12px 16px; border-radius: var(--r-input); font-size: 14px;
  font-weight: 600; margin-bottom: var(--sp-4); border: 1px solid transparent;
}
.fgx-banner--ok    { background: var(--up-tint);   color: var(--up);   border-color: rgba(18,128,92,.25); }
.fgx-banner--error { background: var(--down-tint); color: var(--down); border-color: rgba(192,58,46,.25); }

/* ---------- Formulario ---------- */
.fgx-form {
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.fgx-form__row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.fgx-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.fgx-field > label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.fgx-input {
  font: inherit; font-size: 14px; color: var(--ink);
  width: 100%; height: 40px; padding: 0 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-input);
}
.fgx-input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.fgx-form__foot { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- Panel de administración ---------- */
.fgx-manage__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.fgx-item { padding: var(--sp-3) var(--sp-4); }
.fgx-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.fgx-item__eq { font-weight: 700; font-size: 15px; }
.fgx-badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.fgx-badge--pub   { background: var(--up-tint); color: var(--up); }
.fgx-badge--draft { background: var(--zebra); color: var(--muted); border: 1px solid var(--line); }
.fgx-item__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.fgx-btn-del { color: var(--down); border-color: rgba(192,58,46,.35); }

.fgx-backups { margin-top: var(--sp-2); font-size: 13px; }
.fgx-backups summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.fgx-backups ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.fgx-backups li { margin-bottom: 3px; }
.fgx-backups a { color: var(--accent-deep); }

.fgx-empty { padding: var(--sp-4); }

/* ---------- Summernote: encaje con la piel clara ---------- */
.note-editor.note-frame { border: 1px solid var(--line); border-radius: var(--r-input); overflow: hidden; }
.note-editor .note-toolbar { background: var(--zebra); border-bottom: 1px solid var(--line); }

@media (max-width: 900px) {
  .fgx-admin { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fgx-form { padding: var(--sp-4); }
}