/**
 * WC Mundial Lite - Groups/Tables + Tabs (frontend)
 */

:root {
  /* Valores por defecto (se sobreescriben por skin) */
  --wc26-bg: #ffffff;
  --wc26-fg: #111827;
  --wc26-muted: #6b7280;
  --wc26-border: #e5e7eb;
  --wc26-accent: #2563eb;
  --wc26-accent-contrast: #ffffff;
  --wc26-head-bg: #f3f4f6;
  --wc26-head-fg: #111827;
  --wc26-row-alt: #fafafa;
}

.wc26-groups-root {
  color: var(--wc26-fg);
  position: relative;
}

/* Tables */
.wc26-tabla-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.wc26-tabla-grupo {
  width: 100%;
  border-collapse: collapse;
  background: var(--wc26-bg);
  border: 1px solid var(--wc26-border);
  border-radius: 6px;
  overflow: hidden;
}

/* Caption (Tabla General / Goleadores): styled as a table header band */
.wc26-tabla-grupo caption {
  caption-side: top;
  text-align: left;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wc26-head-fg);
  background: var(--wc26-head-bg);
  border: 1px solid var(--wc26-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.wc26-tabla-grupo thead th {
  text-align: left;
  font-size: 0.875rem;
  color: var(--wc26-head-fg);
  padding: 10px 12px;
  background: var(--wc26-head-bg);
  border-bottom: 1px solid var(--wc26-border);
  white-space: nowrap;
}

.wc26-tabla-grupo tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wc26-border);
  vertical-align: middle;
}

/* Alternar color de filas para mejorar legibilidad */
.wc26-tabla-grupo tbody tr:nth-child(even) td {
  background: var(--wc26-row-alt);
}

/* Pagination controls */
.wc26-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.9rem;
  flex-wrap: wrap;
  gap: 8px;
}
.wc26-pagination .wc26-page-links {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wc26-pagination .wc26-page-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--wc26-border);
  border-radius: 4px;
  background: var(--wc26-bg);
  color: inherit;
  text-decoration: none;
}
.wc26-pagination .wc26-page-link.is-current {
  background: var(--wc26-accent);
  color: var(--wc26-accent-contrast);
  border-color: transparent;
}
.wc26-pagination .wc26-page-link:hover {
  border-color: var(--wc26-accent);
}
.wc26-pagination .wc26-page-link.is-disabled {
  opacity: .5;
  pointer-events: none;
}

.wc26-col-pos { width: 56px; font-weight: 600; text-align: center; }
.wc26-col-pais { font-weight: 600; }
.wc26-team { display: inline-flex; align-items: center; gap: 8px; }
.wc26-flag { display: inline-block; width: 24px; height: 18px; border-radius: 3px; object-fit: cover; }
.wc26-col-pts strong { font-weight: 700; color: var(--wc26-accent); }

@media (max-width: 640px) {
  /* Mantén la tabla intacta y usa scroll horizontal para evitar filas muy altas */
  .wc26-tabla-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wc26-tabla-grupo {
    min-width: 560px;
    font-size: 0.92rem;
  }
  .wc26-tabla-grupo thead { display: table-header-group; }
  .wc26-tabla-grupo tbody { display: table-row-group; }
  .wc26-tabla-grupo tr { display: table-row; }
  .wc26-tabla-grupo td,
  .wc26-tabla-grupo th {
    display: table-cell;
    padding: 8px 10px;
    white-space: nowrap;
  }
.wc26-team { gap: 6px; }
  .wc26-pagination { flex-direction: column; align-items: flex-start; }
  .wc26-pagination .wc26-page-links { justify-content: flex-start; }
}

.wc26-tabla-wrapper.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* Empty state */
.wc26-empty {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px dashed var(--wc26-border);
  border-radius: 6px;
  background: var(--wc26-row-alt);
  color: var(--wc26-muted);
  font-size: 0.95rem;
}
.wc26-empty strong { color: var(--wc26-fg); }
.wc26-empty a {
  color: var(--wc26-accent);
  text-decoration: none;
  font-weight: 600;
}
.wc26-empty a:hover { text-decoration: underline; }

/* Tabs */
.wc26-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  justify-content: center; /* default center */
}

/* Alignment control via data attribute on root */
.wc26-groups-root[data-wc26-align="left"] .wc26-tabs { justify-content: flex-start; }
.wc26-groups-root[data-wc26-align="center"] .wc26-tabs { justify-content: center; }
.wc26-groups-root[data-wc26-align="right"] .wc26-tabs { justify-content: flex-end; }

.wc26-tab {
  appearance: none;
  border: 1px solid var(--wc26-border);
  background: var(--wc26-bg);
  color: var(--wc26-fg);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.875rem;
  cursor: pointer;
}

.wc26-tab.is-active {
  background: var(--wc26-accent);
  color: var(--wc26-accent-contrast);
  border-color: transparent;
}

.wc26-tab:focus { outline: 2px solid var(--wc26-accent); outline-offset: 2px; }

.wc26-tab-panel { display: none; }
.wc26-tab-panel.is-active { display: block; }
/* Fade-in animation for panels */
@keyframes wc26-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.wc26-tab-panel.wc26-anim-in { animation: wc26-fade-in .22s ease; }

/* Skins (3 claros + 3 oscuros) */
/* Claros */
.wc26-groups-root[data-wc26-skin="aurora"] {
  /* Blanco con acento azul intenso */
  --wc26-bg: #ffffff; --wc26-fg: #111827; --wc26-muted: #6b7280; --wc26-border: #e5e7eb; --wc26-accent: #2563eb; --wc26-accent-contrast: #ffffff; --wc26-head-bg:#eaf1fe; --wc26-head-fg:#1f2937; --wc26-row-alt:#f8fafc;
}
.wc26-groups-root[data-wc26-skin="paper"] {
  /* Papel limpio con acento gris carbón */
  --wc26-bg: #ffffff; --wc26-fg: #0f172a; --wc26-muted: #64748b; --wc26-border: #e2e8f0; --wc26-accent: #374151; --wc26-accent-contrast: #ffffff; --wc26-head-bg:#f4f6f8; --wc26-head-fg:#111827; --wc26-row-alt:#f9fafb;
}
.wc26-groups-root[data-wc26-skin="skyline"] {
  /* Cielo claro con acento verde */
  --wc26-bg: #fafafa; --wc26-fg: #111827; --wc26-muted: #6b7280; --wc26-border: #e5e7eb; --wc26-accent: #16a34a; --wc26-accent-contrast: #ffffff; --wc26-head-bg:#ecfdf5; --wc26-head-fg:#065f46; --wc26-row-alt:#f3f4f6;
}
.wc26-groups-root[data-wc26-skin="linen"] {
  /* Lino cálido con acento ámbar */
  --wc26-bg: #fffdf7; --wc26-fg: #1f2937; --wc26-muted: #6b7280; --wc26-border: #eee7d9; --wc26-accent: #f59e0b; --wc26-accent-contrast: #0b0b0b; --wc26-head-bg:#fff6e5; --wc26-head-fg:#92400e; --wc26-row-alt:#fffaf0;
}
.wc26-groups-root[data-wc26-skin="sunrise"] {
  /* Amanecer suave con acento rosado */
  --wc26-bg: #fff7f9; --wc26-fg: #1f2937; --wc26-muted: #6b7280; --wc26-border: #f3d4dc; --wc26-accent: #fb7185; --wc26-accent-contrast: #3b0d14; --wc26-head-bg:#fff1f2; --wc26-head-fg:#9f1239; --wc26-row-alt:#fdf2f8;
}
/* Oscuros */
.wc26-groups-root[data-wc26-skin="midnight"] {
  /* Azul petróleo oscuro con acento azul claro */
  --wc26-bg: #0f172a; --wc26-fg: #e5e7eb; --wc26-muted: #94a3b8; --wc26-border: #1f2937; --wc26-accent: #60a5fa; --wc26-accent-contrast: #0b1020; --wc26-head-bg:#0b1224; --wc26-head-fg:#e5e7eb; --wc26-row-alt:#0e1528;
}
.wc26-groups-root[data-wc26-skin="emerald"] {
  /* Noche verdosa con acento esmeralda */
  --wc26-bg: #0b1020; --wc26-fg: #e5e7eb; --wc26-muted: #9ca3af; --wc26-border: #1f2937; --wc26-accent: #22c55e; --wc26-accent-contrast: #081018; --wc26-head-bg:#0a1713; --wc26-head-fg:#d1fae5; --wc26-row-alt:#0d1623;
}
.wc26-groups-root[data-wc26-skin="carbon"] {
  /* Grafito con acento magenta suave */
  --wc26-bg: #111827; --wc26-fg: #f3f4f6; --wc26-muted: #9ca3af; --wc26-border: #1f2937; --wc26-accent: #f472b6; --wc26-accent-contrast: #0f172a; --wc26-head-bg:#0f1826; --wc26-head-fg:#f9fafb; --wc26-row-alt:#0f172a;
}

/* Nuevos oscuros */
.wc26-groups-root[data-wc26-skin="slate"] {
  /* Grafito/slate, acento gris azulado discreto */
  --wc26-bg: #0f141a; --wc26-fg: #e5e7eb; --wc26-muted: #94a3b8; --wc26-border: #1b2330; --wc26-accent: #64748b; --wc26-accent-contrast: #0c1117; --wc26-head-bg:#0d1218; --wc26-head-fg:#e2e8f0; --wc26-row-alt:#111923;
}
.wc26-groups-root[data-wc26-skin="obsidian"] {
  /* Muy oscuro, neutro (no azulado), acento ámbar */
  --wc26-bg: #0a0a0c; --wc26-fg: #e7e7ea; --wc26-muted: #a1a1aa; --wc26-border: #1a1a1f; --wc26-accent: #f59e0b; --wc26-accent-contrast: #0b0b0f; --wc26-head-bg:#0d0d14; --wc26-head-fg:#f4f4f5; --wc26-row-alt:#101016;
}

/* (Eliminado) Reglas para .wc26-groups-admin-edit removidas por no usarse */

/* ============================================
   ORIENTATION: VERTICAL TABS
   ============================================ */
.wc26-groups-root[data-wc26-orient="vertical"] {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 12px;
  align-items: start;
}
.wc26-groups-root[data-wc26-orient="vertical"] .wc26-tabs {
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 0;
}
.wc26-groups-root[data-wc26-orient="vertical"] .wc26-tab {
  width: 100%;
  text-align: left;
}
.wc26-groups-root[data-wc26-orient="vertical"] .wc26-panels {
  min-width: 0;
}

/* ============================================
   ADMIN QUICK EDIT BUTTON (reuse ticker style)
   Appears on frontend for admins in table instances
   ============================================ */
.wc26-ticker-admin-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #ffeb3b;
  color: #000;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  opacity: 0.95;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  z-index: 5;
}
.wc26-ticker-admin-edit .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
}
.wc26-ticker-admin-edit:hover,
.wc26-ticker-admin-edit:focus {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.wc26-ticker-admin-edit--matches {
  right: 42px;
}

@media (max-width: 720px) {
  .wc26-groups-root[data-wc26-orient="vertical"] {
    display: block;
  }
  .wc26-groups-root[data-wc26-orient="vertical"] .wc26-tabs {
    flex-direction: row;
    gap: 6px;
    margin-bottom: 12px;
  }
}

/* "Jugando" live badge next to a team name in group standings */
.wc26-live-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: #dc2626;
  vertical-align: middle;
}

.wc26-live-badge::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: wc26-live-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wc26-live-badge::after { animation: none; }
}

@keyframes wc26-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}