@import url("./eventos.css");
.dashboard {
  display: grid;
  gap: 18px;
}

:root {
  --primary: #2563eb;
  --primary-dark: #1e3a8a;
  --primary-soft: #eff6ff;

  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;

  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e5edf7;

  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;

  --shadow-sm: 0 8px 22px rgba(15,23,42,.06);
  --shadow-md: 0 14px 35px rgba(15,23,42,.08);
  --shadow-lg: 0 22px 55px rgba(15,23,42,.12);
}

button {
  font-family: inherit;
}

.btn-primary,
.hero-action-btn {
  border: none;
  background: linear-gradient(135deg, var(--primary), #4f7cff);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 25px rgba(37,99,235,.22);
  transition: .22s ease;
}

.btn-primary:hover,
.hero-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(37,99,235,.28);
}

.btn-secondary {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-weight: 900;
  cursor: pointer;
}

.back-btn {
  color: var(--primary);
  font-weight: 900;
}

/* =====================================
   DISEÑO GLOBAL DE TARJETAS
====================================== */

.ds-card,
.settings-card,
.team-section-card,
.team-match-card,
.stat-box-pro,
.performance-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  transition: .25s ease;

}

.ds-card:hover,
.settings-card:hover,
.team-section-card:hover,
.team-match-card:hover,
.stat-box-pro:hover,
.performance-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-md);

}

.hero-card,
.card,
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.hero-card {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-card h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.hero-card p {
  color: var(--muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.badge.success {
  background: var(--success-soft);
  color: #15803d;
}

.badge.danger {
  background: var(--danger-soft);
  color: #b91c1c;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.kpi-card {
  padding: 20px;
}

.kpi-card span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  font-size: 22px;
  margin-bottom: 14px;
}

.kpi-card h3 {
  font-size: 30px;
}

.kpi-card p {
  color: var(--muted);
  margin-top: 4px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.card {
  padding: 20px;
}

.card h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.progress-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.progress-bar {
  height: 12px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 24px 0 12px;
}

.progress-bar div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-info span {
  color: var(--muted);
  font-size: 14px;
}

.progress-info strong {
  font-size: 30px;
  color: #16a34a;
}

.live-card {
  background: radial-gradient(circle at top, #102a43, #020617);
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}

.score-live,
.next-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.flag {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 42px;
  margin: 0 auto 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.score strong {
  display: block;
  font-size: 42px;
  line-height: 1;
}

.score span {
  display: inline-block;
  background: var(--danger);
  padding: 6px 12px;
  border-radius: 999px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 800;
}

.btn {
  margin-top: 22px;
  width: 100%;
  border-radius: 14px;
  padding: 13px 16px;
  font-weight: 800;
  transition: var(--transition);
}

.btn.danger {
  background: var(--danger);
  color: #fff;
}

.btn:hover {
  transform: translateY(-1px);
}

.next-card .card-title span {
  color: var(--muted);
  font-size: 14px;
}

.next-match strong {
  font-size: 24px;
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  

  .badge {
    justify-self: center;
  }

   .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .kpi-card {
    padding: 14px;
    min-height: 118px;
  }

  .kpi-card span {
    width: 34px;
    height: 34px;
    font-size: 18px;
    margin-bottom: 8px;
  }

  .kpi-card h3 {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
  }

  .kpi-card p {
    font-size: 13px;
  }

  .hero-card {
    padding: 16px;
  }

  .hero-card h1 {
    font-size: 22px;
    line-height: 1.25;
  }

  .hero-card p {
    font-size: 12.5px;
    line-height: 1.5;
  }

  .card {
    padding: 16px;
  }

  .score-live,
  .next-match {
    gap: 10px;
  }

  .flag {
    width: 52px;
    height: 52px;
    font-size: 34px;
  }

  .score strong {
    font-size: 32px;
  }
}

@media (max-width: 430px) {
  .kpi-card {
    min-height: 108px;
    padding: 12px;
  }

  .kpi-card h3 {
    font-size: 22px;
  }

  .kpi-card p {
    font-size: 12.5px;
  }
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
}

.kpi-card.compact {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
}

.kpi-card.compact span {
  margin: 0;
}

.compact-card {
  min-height: 190px;
}

.progress-card .card-title strong {
  font-size: 28px;
  color: #16a34a;
}

.muted {
  color: var(--muted);
  font-size: 14px;
}

.live-card.premium {
  min-height: 190px;
}

.live-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.live-header > span:last-child {
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 999px;
}

.score small {
  display: block;
  margin-top: 8px;
  color: #cbd5e1;
}

.card-title a {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.result-list,
.top-list {
  display: grid;
  gap: 12px;
}

.result-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
}

.result-item strong {
  font-size: 16px;
}

.result-item small {
  background: var(--success-soft);
  color: #15803d;
  font-size: 10px;
  font-weight: 900;
  padding: 5px 8px;
  border-radius: 999px;
}

.top-item {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: #f8fafc;
}

.top-item span {
  font-size: 24px;
}

.top-item em {
  font-style: normal;
  color: var(--primary);
  font-weight: 900;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.quick-actions button {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  font-weight: 900;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 900px) {
  .compact-card,
  .live-card.premium {
    min-height: auto;
  }

  .result-item {
    grid-template-columns: 1fr auto;
  }

  .result-item small {
    display: none;
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-actions button {
    padding: 14px;
  }
}

@media (max-width: 430px) {
  .hero-card h1 {
    font-size: 20px;
  }

  .kpi-card.compact {
    min-height: 82px;
    padding: 12px;
  }

  .progress-info strong {
    font-size: 24px;
  }
}

.torneo-view {
  display: grid;
  gap: 18px;
}

.torneo-tabs {
  display: flex;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 8px;
  box-shadow: var(--shadow-soft);
  overflow-x: auto;
}

.tab-btn {
  padding: 12px 18px;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  white-space: nowrap;
}

.tab-btn.active {
  background: var(--primary);
  color: #fff;
}

.torneo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.torneo-header h2 {
  font-size: 24px;
}

.torneo-header p {
  color: var(--muted);
  margin-top: 4px;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 900;
  box-shadow: var(--shadow-soft);
}

.search-box input {
  width: 100%;
  padding: 15px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  font-size: 15px;
  outline: none;
  display: none;
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.team-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
  position: relative;
}

.team-flag {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  font-size: 34px;
}

.team-info h3 {
  font-size: 19px;
}

.team-info p {
  color: var(--muted);
  margin-top: 3px;
}

.team-info small {
  display: block;
  color: var(--muted);
  margin-top: 8px;
}

.team-status {
  position: absolute;
  right: 14px;
  top: 14px;
  background: var(--success-soft);
  color: #15803d;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .torneo-header {
    align-items: stretch;
    flex-direction: column;
  }

  .btn-primary {
    width: 100%;
  }

  .teams-grid {
    grid-template-columns: 1fr;
  }
}

.modal-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

display:flex;

justify-content:center;

align-items:center;

padding:20px;

z-index:999;

backdrop-filter:blur(4px);

}

.modal-window{

width:100%;

max-width:480px;

background:white;

border-radius:24px;

box-shadow:0 30px 80px rgba(0,0,0,.20);

overflow:hidden;

animation:modal .25s ease;

}

@keyframes modal{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.modal-header{

padding:22px;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid #eee;

}

.modal-body{

padding:24px;

display:grid;

gap:18px;

}

.modal-footer{

padding:20px;

display:flex;

justify-content:flex-end;

gap:12px;

border-top:1px solid #eee;

}

.btn-secondary{

padding:12px 18px;

border-radius:12px;

background:#f1f5f9;

font-weight:700;

}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
}

.form-group input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  outline: none;
  font-size: 15px;
}

.form-group input:focus {
  border-color: var(--primary);
}

.modal-error {
  color: var(--danger);
  font-weight: 800;
  font-size: 13px;
  min-height: 18px;
}

.empty-state {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 22px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.ligaya-team {
  padding: 14px;
  min-height: auto;
  border-radius: 20px;
}

.team-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.team-flag-circle {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  display: grid;
  place-items: center;
  font-size: 30px;
}

.team-content {
  flex: 1;
  min-width: 0;
}

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.team-row h3 {
  font-size: 16px;
  line-height: 1.2;
}

.team-row span {
  background: var(--success-soft);
  color: #15803d;
  font-size: 10px;
  font-weight: 900;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.team-content p {
  color: var(--muted);
  margin-top: 3px;
  font-size: 13px;
}

.team-footer {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.team-footer small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.fixture-page {
  display: grid;
  gap: 16px;
}

.page-title {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.page-title h2 {
  font-size: 24px;
}

.page-title p {
  color: var(--muted);
  margin-top: 4px;
}

.fixture-list {
  display: grid;
  gap: 14px;
}

.match-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.match-header,
.match-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-header {
  margin-bottom: 14px;
}

.match-header span:first-child {
  font-weight: 900;
  color: var(--primary);
}

.estado {
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}

.estado.en-vivo {
  background: var(--danger-soft);
  color: #b91c1c;
}

.estado.finalizado {
  background: var(--success-soft);
  color: #15803d;
}

.match-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  text-align: center;
  margin-bottom: 16px;
}

.team {
  display: grid;
  gap: 6px;
  font-size: 28px;
}

.team strong {
  font-size: 14px;
}

.vs {
  font-weight: 1000;
  color: var(--muted);
}

.btn-live,
.btn-score {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  font-weight: 900;
}

.btn-live {
  background: var(--primary);
  color: #fff;
}

.btn-score {
  background: var(--danger);
  color: #fff;
}

.match-footer button:disabled {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 900;
}

.fixture-hero {
  background: radial-gradient(circle at top left, #2563eb, #020617 70%);
  color: #fff;
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.fixture-hero span {
  font-size: 13px;
  font-weight: 900;
  color: #bfdbfe;
}

.fixture-hero h2 {
  font-size: 22px;
  margin-top: 8px;
  line-height: 1.2;
}

.fixture-hero p {
  color: #cbd5e1;
  margin-top: 6px;
}

.match-card-pro {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.match-card-pro.is-live {
  border-color: var(--danger);
  box-shadow: 0 16px 35px rgba(239, 68, 68, 0.18);
}

.match-pro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-pro-header small {
  display: block;
  color: var(--muted);
  font-weight: 900;
  font-size: 11px;
}

.match-pro-header strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  color: var(--primary);
}

.match-status {
  font-size: 10px;
  font-weight: 1000;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}

.match-status.en-vivo {
  background: var(--danger-soft);
  color: #b91c1c;
}

.match-status.finalizado {
  background: var(--success-soft);
  color: #15803d;
}

.match-pro-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin: 18px 0;
}

.match-team {
  min-width: 0;
}

.match-flag {
  width: 58px;
  height: 58px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 34px;
}

.match-team h3 {
  font-size: 13px;
  line-height: 1.2;
}

.match-vs {
  font-weight: 1000;
  color: var(--muted);
}

.match-pro-footer button {
  width: 100%;
  padding: 13px;
  border-radius: 15px;
  font-weight: 900;
}

.scoreboard {
  min-height: calc(100vh - 150px);
  background: radial-gradient(circle at top, #0f2a52, #020617 75%);
  color: #fff;
  border-radius: 28px;
  padding: 18px;
  display: grid;
  gap: 18px;
  box-shadow: var(--shadow);
}

.scoreboard-header {
  text-align: center;
}

.scoreboard-header span {
  display: inline-block;
  background: var(--danger);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}

.scoreboard-header h2 {
  margin-top: 12px;
  font-size: 26px;
}

.scoreboard-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
}

.score-side {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 16px 10px;
  display: grid;
  place-items: center;
  gap: 8px;
}

.score-flag {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 42px;
}

.score-side h3 {
  font-size: 14px;
  text-align: center;
}

.score-side strong {
  font-size: 68px;
  line-height: 1;
}

.score-side small {
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 900;
}

.score-center {
  align-self: center;
  text-align: center;
}

.score-center span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: grid;
  place-items: center;
  font-weight: 1000;
}

.score-center p {
  margin-top: 12px;
  color: #cbd5e1;
  font-size: 12px;
  white-space: nowrap;
}

.score-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.score-actions button {
  padding: 14px;
  border-radius: 16px;
  font-weight: 900;
}

@media (max-width: 520px) {
  .scoreboard {
    min-height: calc(100vh - 120px);
    padding: 14px;
  }

  .scoreboard-teams {
    grid-template-columns: 1fr;
  }

  .score-center {
    order: -1;
  }

  .score-center span {
    margin: 0 auto;
  }

  .score-side {
    min-height: 190px;
  }

  .score-side strong {
    font-size: 64px;
  }
}

.scoreboard-landscape {
  min-height: calc(100vh - 130px);
  background: radial-gradient(circle at top, #0f2a52, #020617 75%);
  color: #fff;
  border-radius: 28px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.rotate-warning {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.scoreboard-game {
  height: 100%;
  min-height: calc(100vh - 165px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

.score-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.live-pill {
  background: var(--danger);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.score-top strong {
  font-size: 22px;
}

.score-top span:last-child {
  color: #cbd5e1;
  font-weight: 800;
}

.score-main {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  gap: 12px;
  align-items: stretch;
}

.score-team-panel {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 16px;
  display: grid;
  place-items: center;
  gap: 6px;
}

.score-team-panel h3 {
  font-size: 15px;
  text-align: center;
}

.score-team-panel strong {
  font-size: clamp(70px, 12vw, 130px);
  line-height: 1;
}



.score-versus {
  align-self: center;
  justify-self: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  font-weight: 1000;
}

.score-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.score-bottom button {
  padding: 13px;
  border-radius: 16px;
  font-weight: 900;
}

@media (orientation: portrait) and (max-width: 900px) {
  .scoreboard-game {
    display: none;
  }

  .rotate-warning {
    display: block;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .topbar,
  .bottom-nav,
  .sidebar {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .scoreboard-landscape {
    min-height: 100vh;
    border-radius: 0;
  }

  .scoreboard-game {
    min-height: calc(100vh - 28px);
  }
}

.score-message {
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #111827;
  font-weight: 1000;
  text-align: center;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 18px;
  animation: scorePop .45s ease;
}

@keyframes scorePop {
  from {
    opacity: 0;
    transform: scale(.88);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


.match-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

display:flex;

justify-content:center;

align-items:center;

backdrop-filter:blur(5px);

z-index:999;

animation:fadeIn .35s;
}

.match-popup{
    width:420px;
    max-width:90vw;

    background:#071126;

    border-radius:30px;

    padding:28px;

    text-align:center;

    box-shadow:0 20px 80px rgba(0,0,0,.45);

    border:2px solid rgba(255,215,0,.25);

    animation:zoomIn .45s;
}

.match-popup h1{

font-size:34px;
    line-height:1.15;
    margin:12px 0;

margin:10px 0;

color:#FFD54A;

font-weight:900;
}

.match-popup h2{

color:white;

font-size:34px;

margin-top:10px;
}

.match-popup p{

color:#cfd8dc;

margin:15px 0;
}

.trophy{

font-size:80px;

animation:bounce 1s infinite;
}

.score-final{

display:flex;

justify-content:center;

gap:30px;

display:flex;
    justify-content:center;
    gap:20px;

    margin-top:20px;

    font-size:52px;

    font-weight:900;
font-weight:900;

margin-top:20px;

color:white;
}

.finished{

background:#16a34a!important;

color:white;
}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.7);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes fadeIn{

from{opacity:0;}

to{opacity:1;}

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

.btn-close-final {
  margin-top: 24px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  background: #2563eb;
  color: white;
  font-weight: 900;
}

@media (orientation: landscape) and (max-height: 520px) {
  .match-overlay {
    padding: 8px;
  }

  .match-popup {
    width: min(340px, 72vw) !important;
    max-height: 82vh !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  .trophy {
    font-size: 30px !important;
    margin-bottom: 2px;
  }

  .match-popup h2 {
    font-size: 17px !important;
    line-height: 1.15;
    margin: 4px 0 !important;
  }

  .match-popup p {
    font-size: 11px !important;
    margin: 4px 0 !important;
  }

  .match-popup h1 {
    font-size: 22px !important;
    line-height: 1.15;
    margin: 5px 0 !important;
  }

  .score-final {
    font-size: 30px !important;
    gap: 14px !important;
    margin-top: 6px !important;
  }

  .btn-close-final {
    margin-top: 8px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
}

.match-result-final {
  width: 100%;
  background: var(--success-soft);
  color: #15803d;
  border-radius: 15px;
  padding: 12px;
  display: grid;
  gap: 4px;
  text-align: center;
  font-weight: 900;
}

.match-result-final strong {
  font-size: 22px;
}

.match-result-final span {
  font-size: 12px;
}

.tabla-list{

display:grid;

gap:14px;

}

.tabla-card{

background:white;

padding:16px;

border-radius:18px;

display:grid;

grid-template-columns:55px 1fr 70px;

align-items:center;

box-shadow:var(--shadow);

}

.puesto{

width:42px;

height:42px;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#1e40af);

display:grid;

place-items:center;

color:white;

font-weight:900;

font-size:18px;

}

.equipo strong{

display:block;

font-size:17px;

}

.equipo span{

color:#64748b;

font-size:13px;

}

.sets{

font-size:24px;

font-weight:900;

text-align:right;

color:#15803d;

}



.more-page {
  display: grid;
  gap: 18px;
}

.more-header {
  background: linear-gradient(135deg, #2563eb, #020617);
  color: #fff;
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.more-header h2 {
  font-size: 24px;
}

.more-header p {
  color: #cbd5e1;
  margin-top: 6px;
}

.more-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.more-row {
  width: 100%;
  background: #fff;
  padding: 16px;
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.more-row:last-child {
  border-bottom: none;
}

.more-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 20px;
}

.more-row strong {
  display: block;
  font-size: 15px;
}

.more-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.more-row em {
  font-style: normal;
  color: var(--muted);
  font-weight: 900;
}

.more-row.danger .more-icon {
  background: var(--danger-soft);
}

.danger-list {
  margin-top: 4px;
}

.equipos-page {
  display: grid;
  gap: 16px;
}

.equipos-hero {
  background: linear-gradient(135deg, #2563eb, #020617);
  color: #fff;
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.equipos-hero span {
  font-size: 12px;
  font-weight: 900;
  color: #bfdbfe;
}

.equipos-hero h2 {
  font-size: 24px;
  margin-top: 6px;
}

.equipos-hero p {
  color: #cbd5e1;
  margin-top: 4px;
}

.equipos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.equipo-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.equipo-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.equipo-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 34px;
}

.equipo-top span {
  background: var(--success-soft);
  color: #15803d;
  font-size: 10px;
  font-weight: 900;
  padding: 6px 9px;
  border-radius: 999px;
}

.equipo-body h3 {
  margin-top: 14px;
  font-size: 18px;
}

.equipo-body p {
  color: var(--muted);
  margin-top: 4px;
  font-size: 13px;
}

.equipo-meta {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.equipo-meta small {
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 900px) {
  .equipos-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .equipos-grid {
    grid-template-columns: 1fr;
  }
}

.team-premium-card {
  position: relative;
  padding: 20px;
  display: grid;
  gap: 14px;
  text-align: center;
}

.team-menu-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #f1f5f9;
  color: #64748b;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 900;
}

.team-premium-avatar {
  margin: 0 auto;
}

.team-premium-info h3 {
  font-size: 19px;
}

.team-premium-info p {
  color: var(--muted);
  margin-top: 3px;
}

.team-premium-stats {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.team-premium-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.team-detail-btn {
  background: var(--primary-soft);
  color: var(--primary);
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
}

@media (max-width: 520px) {
  .team-premium-card {
    padding: 18px;
  }
}




.back-btn {
  width: max-content;
  background: transparent;
  color: var(--primary);
  font-weight: 900;
}



.team-profile-avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 48px;
  margin: 0 auto 14px;
}

.team-profile-hero h2 {
  font-size: 26px;
}

.team-profile-hero p {
  color: var(--muted);
  margin: 4px 0 12px;
}



@media (max-width: 520px) {
  .team-profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tabla-page {
  display: grid;
  gap: 16px;
}

.tabla-list {
  display: grid;
  gap: 12px;
}

.tabla-card {
  padding: 14px;
  display: grid;
  grid-template-columns: 48px 1fr 62px;
  align-items: center;
  gap: 12px;
}

.tabla-pos{
    width:52px;
    height:52px;
    border-radius:18px;
    background:#EFF6FF;
    display:grid;
    place-items:center;
    font-size:24px;
}

.tabla-team strong {
  display: block;
  font-size: 15px;
}

.tabla-team span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.tabla-points {
  text-align: center;
}

.tabla-points strong{
    display:block;
    font-size:38px;
    line-height:1;
    color:#2563EB;
    font-weight:900;
}

.tabla-points span{
    display:block;
    margin-top:4px;
    font-size:11px;
    letter-spacing:2px;
    font-weight:900;
    color:#64748B;
}

.tabla-country{
    margin:4px 0;
    font-size:13px;
    color:#64748B;
    font-weight:700;
}

.dashboard-section {
  padding: 18px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.section-title h3 {
  font-size: 18px;
}

.section-title p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.section-link {
  background: var(--primary-soft);
  color: var(--primary);
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
}

.top-ranking {
  display: grid;
  gap: 10px;
}

.top-rank-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px;
}

.rank-medal {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.top-rank-item strong {
  display: block;
  font-size: 14px;
}

.top-rank-item span {
  color: var(--muted);
  font-size: 12px;
}

.top-rank-item b {
  color: var(--primary);
  font-size: 18px;
}

.dashboard-hero-pro {
  background: linear-gradient(135deg, #2563eb, #020617);
  color: #fff;
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.dashboard-hero-pro span {
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 900;
}

.dashboard-hero-pro h1 {
  font-size: 28px;
  margin-top: 8px;
  line-height: 1.15;
}

.dashboard-hero-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dashboard-hero-meta small {
  background: rgba(255,255,255,.12);
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  color: #e5e7eb;
  max-width: 100%;
  white-space: normal;
}

.hero-status {
  background: #dcfce7;
  color: #15803d;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .dashboard-hero-pro {
    flex-direction: column;
    align-items: flex-start;
  }
}

.kpi-card-pro {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 8px;
}

.kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 20px;
}

.kpi-card-pro h3 {
  font-size: 30px;
  line-height: 1;
}

.kpi-card-pro p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.top-rank-item{
    display:flex;
    align-items:center;
    gap:16px;

    padding:18px;

    background:#fff;

    border-radius:20px;

    margin-top:14px;

    box-shadow:var(--shadow-soft);

    transition:.25s;
}

.top-rank-item:hover{

    transform:translateY(-2px);

}

.first-place{

    border:2px solid #FFD54A;

    background:linear-gradient(
        90deg,
        rgba(255,214,74,.15),
        #fff
    );

}

.rank-medal{

    width:54px;
    height:54px;

    border-radius:18px;

    background:#f8fafc;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    flex-shrink:0;

}

.rank-info{

    flex:1;

}

.rank-info strong{

    display:block;

    font-size:18px;

}

.rank-info small{

    color:#64748b;

}

.rank-bar{

    margin-top:10px;

    height:6px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;

}

.rank-bar div{

    height:100%;

    border-radius:999px;

    background:linear-gradient(90deg,#2563eb,#22c55e);

}

.rank-points{

    text-align:center;

}

.rank-points strong{

    display:block;

    font-size:28px;

    color:#2563eb;

}

.rank-points span{

    font-size:11px;

    color:#64748b;

    font-weight:700;

}

.live-empty{

    text-align:center;

    padding:22px 10px;

}

.live-empty-icon{

    font-size:46px;

    margin-bottom:10px;

}

.live-empty h3{

    font-size:19px;

    margin-bottom:8px;

}

.live-empty p{

    color:#94a3b8;

    line-height:1.5;

}

.next-info{

    margin-top:14px;

    text-align:center;

    color:#64748b;

}

.next-round{

    margin-top:6px;

    text-align:center;

    font-weight:700;

    color:#2563eb;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #edf2f7;

}

.summary-item:last-child{

    border:none;

}

.hero-version{

    display:block;

    margin-top:6px;

    color:#cbd5e1;

    font-size:12px;

    letter-spacing:.5px;

}


/* ===========================
   MODAL
=========================== */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(6px);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:9999;
}

.modal-card{

    width:100%;
    max-width:430px;

    background:#fff;

    border-radius:28px;

    padding:28px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    animation:modalShow .25s ease;

}

@keyframes modalShow{

    from{
        opacity:0;
        transform:translateY(25px) scale(.95);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

.modal-card h2{

    margin:0 0 24px;

    font-size:28px;

    font-weight:800;

    color:#0f172a;

}

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:18px;

}

.form-group label{

    margin-bottom:8px;

    font-size:14px;

    font-weight:700;

    color:#475569;

}

.form-group input{

    width:100%;

    padding:15px 18px;

    border-radius:14px;

    border:1px solid #dbe4f0;

    font-size:15px;

    transition:.2s;

    outline:none;

}

.form-group input:focus{

    border-color:#3b82f6;

    box-shadow:0 0 0 4px rgba(59,130,246,.15);

}

.modal-actions{

    display:flex;

    gap:14px;

    margin-top:28px;

}

.modal-actions button{

    flex:1;

    height:50px;

    border:none;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

}

.btn-secondary{

    background:#eef4ff;

    color:#2563eb;

}

.btn-secondary:hover{

    background:#dbeafe;

}

.btn-primary{

    background:linear-gradient(135deg,#3b82f6,#2563eb);

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-1px);

    box-shadow:0 10px 20px rgba(37,99,235,.25);

}

.modal-header{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:28px;

}

.modal-icon{

    width:56px;

    height:56px;

    border-radius:18px;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.modal-header h2{

    margin:0;

    font-size:24px;

}

.modal-header p{

    margin-top:4px;

    color:#64748b;

    font-size:14px;

}


.team-list-card {
  padding: 16px;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
}

.team-list-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 32px;
}

.team-list-info h3 {
  font-size: 17px;
}

.team-list-info p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.team-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.team-list-meta span {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.team-list-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.team-list-side .team-menu-btn {
  position: static;
}

.team-list-side .team-detail-btn {
  background: var(--primary-soft);
  color: var(--primary);
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 520px) {
  .team-list-card {
    grid-template-columns: 56px 1fr;
  }

  .team-list-side {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: stretch;
  }
}

.equipos-hero-pro {
  background: linear-gradient(135deg, #2563eb, #020617);
  color: #fff;
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
}

.equipos-hero-pro span {
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 900;
}

.equipos-hero-pro h2 {
  font-size: 28px;
  line-height: 1.1;
  margin-top: 8px;
}

.equipos-hero-pro p {
  color: #dbeafe;
  margin-top: 6px;
}

.hero-action-btn {
  width: 100%;
  height: 50px;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.18);
}

.team-sport-card {
  position: relative;
  overflow: visible;
}

.context-menu {
  position: absolute;
  top: 52px;
  right: 16px;
  width: 190px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
  z-index: 50;
  animation: menuIn .18s;
}

.context-menu button {
  width: 100%;
  border: none;
  background: none;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}

.context-menu button:hover{

    background:#eff6ff;

}

.context-menu .danger{

    color:#dc2626;

}

@keyframes menuIn{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.players-page {
  display: grid;
  gap: 16px;
}

.players-hero-pro {
  background: linear-gradient(135deg, #2563eb, #020617);
  color: #fff;
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
}

.players-hero-pro h2 {
  font-size: 30px;
}

.players-hero-pro p {
  color: #dbeafe;
  margin-top: 6px;
}

.players-list {
  display: grid;
  gap: 12px;
}

.player-list-card {
  padding: 16px;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
}

.player-number {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 1000;
}

.player-info h3 {
  font-size: 17px;
}

.player-info p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.player-status {
  background: var(--success-soft);
  color: #15803d;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.fixture-hero-pro {
  display: grid;
  gap: 10px;
}

.fixture-progress {
  height: 8px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
}

.fixture-progress div {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #facc15);
}

.fixture-hero-pro small {
  color: #bfdbfe;
  font-weight: 800;
}

.toast{

position:fixed;

left:50%;

top:25px;

transform:translateX(-50%) translateY(-30px);

background:#fff;

border-radius:18px;

padding:14px 18px;

display:flex;

align-items:center;

gap:14px;

box-shadow:0 18px 40px rgba(0,0,0,.20);

z-index:99999;

opacity:0;

transition:.28s;

min-width:280px;

max-width:90%;

font-weight:700;

}

.toast.show{

opacity:1;

transform:translateX(-50%) translateY(0);

}

.toast-icon{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

}

.toast-success .toast-icon{

background:#dcfce7;

}

.toast-error .toast-icon{

background:#fee2e2;

}

.toast-warning .toast-icon{

background:#fef3c7;

}

.toast-info .toast-icon{

background:#dbeafe;

}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 99998;
}

.loading-card {
  background: #fff;
  padding: 28px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,.20);
  width: min(320px, 90%);
}

.spinner {
  width: 54px;
  height: 54px;
  border: 5px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-card h3 {
  font-size: 20px;
}

.loading-card p {
  color: #64748b;
  margin-top: 6px;
}

.round-block {
  display: grid;
  gap: 12px;
}

.round-header {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}

.round-header h3 {
  font-size: 17px;
}

.round-header p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.round-matches {
  display: grid;
  gap: 12px;
}

.match-card-pro.is-pending {
  border-left: 5px solid #2563eb;
}

.match-card-pro.is-live {
  border-left: 5px solid #dc2626;
  animation: livePulse 1.5s infinite;
}

.match-card-pro.is-finished {
  border-left: 5px solid #16a34a;
}

@keyframes livePulse {
  0%, 100% {
    box-shadow: 0 16px 35px rgba(239, 68, 68, 0.12);
  }

  50% {
    box-shadow: 0 16px 40px rgba(239, 68, 68, 0.28);
  }
}

.score-title {
  text-align: center;
}

.score-title strong {
  display: block;
  font-size: 24px;
}

.score-title small {
  display: block;
  margin-top: 4px;
  color: #cbd5e1;
  font-weight: 900;
}

.undo-top-btn {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
}

.undo-top-btn:hover {
  background: rgba(255,255,255,.2);
}

body.event-mode .sidebar,
body.event-mode .topbar,
body.event-mode .bottom-nav {
  display: none !important;
}

body.event-mode .main-content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  max-width: none !important;
}

body.event-mode #app {
  padding: 0 !important;
  margin: 0 !important;
}

.team-flag-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.team-flag-img{

    width:52px;
    height:52px;

    border-radius:50%;

    border:3px solid #fff;

    box-shadow:
        0 6px 18px rgba(0,0,0,.18);

}

.match-flag{

    width:74px;
    height:74px;

    border-radius:50%;

    background:#eef5ff;

    display:flex;
    align-items:center;
    justify-content:center;
}

.team-flag-img{

    transition:.25s;

}

.team-flag-img:hover{

    transform:scale(1.08);

}

.event-ball .team-flag-img,
.next-team-ball .team-flag-img {
  width: 76px;
  height: 76px;
}

/*======================================
CONFIGURACIÓN
======================================*/

.settings-page{

    display:flex;
    flex-direction:column;
    gap:28px;

}

.settings-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
    gap:24px;

}

.settings-card{

    background:#fff;

    border-radius:26px;

    padding:22px;

    box-shadow:0 12px 30px rgba(25,42,70,.08);

    border:1px solid #edf2f7;

}

.settings-card h3{

    margin:0 0 24px;

    font-size:24px;

    color:#1e40af;

    font-weight:800;

}

.settings-card label{

    display:block;

    margin:12px 0 6px;

    font-size:14px;

    font-weight:700;

    color:#64748b;

}

.settings-card input,
.settings-card select{

    width:100%;

    height:44px;

    border-radius:14px;

    border:1px solid #dbe3ef;

    padding:0 16px;

    font-size:15px;

    transition:.25s;

    background:#f8fafc;

}

.settings-card input:focus,
.settings-card select:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.btn-save-settings{

    align-self:flex-end;

    background:linear-gradient(135deg,#2563eb,#4f7cff);

    color:#fff;

    border:none;

    padding:16px 34px;

    border-radius:16px;

    font-size:17px;

    font-weight:800;

    cursor:pointer;

    transition:.25s;

}

.btn-save-settings:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(37,99,235,.28);

}

.settings-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.settings-header h1 {
  font-size: 30px;
  line-height: 1;
}

.settings-header p {
  max-width: 100%;
  line-height: 1.3;
}

.settings-status {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.status-card {
  min-width: 0;
  border-radius: 18px;
  padding: 16px 12px;
}

.status-card small {
  font-size: 12px;
}

.status-card strong {
  font-size: 20px;
}

.status-card{
   background:rgba(255,255,255,.10);
   backdrop-filter:blur(12px);
   border:1px solid rgba(255,255,255,.15);
   box-shadow:none;
    color:#fff;
    border-radius:18px;
    padding:18px;
    text-align:center;
    box-shadow:0 12px 25px rgba(37,99,235,.25);
    transition:.25s;
}

.status-card:hover{
    background:rgba(255,255,255,.15);
    transform:translateY(-3px);
}

.status-card small{
    display:block;
    font-size:13px;
    opacity:.85;
    margin-bottom:8px;
    font-weight:700;
}

.status-card strong{
    display:block;
    font-size:22px;
    font-weight:900;
}

.status-card span{

    font-size:22px;

    font-weight:900;

}


@media (min-width: 900px) {
  .settings-header {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .settings-status {
    width: 420px;
  }
}

/*=========================================
 HERO CONFIGURACIÓN
=========================================*/

.settings-hero{

    background:
        linear-gradient(135deg,#1d4ed8 0%,#2747c7 45%,#111827 100%);

    border-radius:28px;

    padding:28px;

    margin-bottom:6px;

    color:#fff;

    box-shadow:
        0 20px 40px rgba(37,99,235,.20);

    position:relative;

    overflow:hidden;

}

.settings-hero::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

}

.settings-hero::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:-80px;

    bottom:-80px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

}

.settings-header{

    position:relative;

    z-index:2;

}

.settings-info h1{

    color:#fff;

    font-size:42px;

    margin:8px 0;

}

.settings-info p{

    color:rgba(255,255,255,.82);

}

.settings-info .badge-title{

    color:#bfdbfe;

    font-weight:700;

}


/*==================================
RESUMEN DEL CAMPEONATO
==================================*/

.settings-summary{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-bottom:24px;

}

.summary-item{

    background:#fff;

    border-radius:18px;

    padding:18px 22px;

    border:1px solid #edf2f7;

    box-shadow:0 10px 25px rgba(15,23,42,.05);

}

.summary-item span{

    display:block;

    color:#64748b;

    font-size:13px;

    margin-bottom:8px;

    font-weight:700;

}

.summary-item strong{

    color:#0f172a;

    font-size:22px;

    font-weight:900;

}

/*==============================
HEADER DE TARJETAS
==============================*/

.settings-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.settings-card-header>div{

    display:flex;

    align-items:center;

    gap:12px;

}

.settings-card-header h3{

    margin:0;

    color:#1e3a8a;

    font-size:25px;

    font-weight:800;

}

.settings-icon{

    font-size:28px;

}

.settings-toggle{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#eef4ff;

    color:#2563eb;

    cursor:pointer;

    font-size:18px;

    font-weight:800;

    transition:.25s;

}

.settings-toggle:hover{

    background:#2563eb;

    color:#fff;

}

/*====================================
RESUMEN DE CONFIGURACIÓN
====================================*/

.settings-preview{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.settings-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px dashed #e2e8f0;

}

.settings-row:last-child{

    border-bottom:none;

}

.settings-label{

    color:#64748b;

    font-weight:700;

}

.settings-value{

    color:#0f172a;

    font-weight:800;

}

.settings-edit{

    margin-top:18px;

    display:flex;

    justify-content:flex-end;

}

.btn-edit-settings{

    border:none;

    background:#eff6ff;

    color:#2563eb;

    padding:10px 18px;

    border-radius:12px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.btn-edit-settings:hover{

    background:#2563eb;

    color:#fff;

}

/*====================================
CONFIGURACION - TARJETAS COMPACTAS
====================================*/

.settings-page .settings-card{
    width:calc(100% - 20px);
    max-width:430px;

    margin-left:auto;
    margin-right:auto;

    padding:18px 16px;

    border-radius:24px;

    box-sizing:border-box;
}

.settings-page .settings-grid{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.settings-page .settings-section{
    padding-left:6px;
    padding-right:6px;
}

.settings-page .settings-card-header{
    margin-bottom:12px;
}

.settings-page .settings-card-header>div{
    gap:10px;
}

.settings-page .settings-card-header h3{
    font-size:22px;
    line-height:1.15;
}

.settings-page .settings-icon{
    font-size:24px;
}

.settings-page .settings-preview{
    gap:0;
}

.settings-page .settings-row{
    padding:9px 0;
    min-height:38px;
}

.settings-page .settings-label{
    font-size:14px;
    line-height:1.2;
}

.settings-page .settings-value{
    font-size:14px;
    line-height:1.2;
    text-align:right;
}

.settings-page .settings-edit{
    margin-top:12px;
}

.settings-page .btn-edit-settings{
    padding:8px 14px;
    min-height:38px;
    border-radius:12px;
    font-size:13px;
}

.settings-page .settings-grid{
    gap:16px;
}

.config-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.58);
  backdrop-filter: blur(7px);
  display: grid;
  place-items: center;
  z-index: 99999;
  padding: 20px;
}

.config-modal-card {
  width: min(520px, 100%);
  max-height: 88vh;
  background: #fff;
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
  animation: modalIn .22s ease;

  display: flex;
  flex-direction: column;
}

.config-modal-body {
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding-right: 6px;
  max-height: calc(88vh - 180px);
}

.config-modal-actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}

.config-modal-header {
  display: grid;
  grid-template-columns: 54px 1fr 42px;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.config-modal-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  font-size: 28px;
}

.config-modal-header h2 {
  margin: 0;
  font-size: 22px;
}

.config-modal-header p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.config-modal-close {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  background: #f1f5f9;
  font-size: 24px;
  cursor: pointer;
}



.config-modal-body label {
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
}

.config-modal-body input,
.config-modal-body select {
  width: 100%;
  height: 46px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 0 14px;
  background: #f8fafc;
}



.config-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-top:6px;

}

.config-grid>div{

    display:flex;

    flex-direction:column;

}

@media (max-width:480px){

    .config-grid{

        grid-template-columns:1fr;

    }

}

.config-section{

    margin:20px 0 12px;

    color:#2563eb;

    font-size:15px;

    font-weight:800;

    border-bottom:2px solid #eef2ff;

    padding-bottom:8px;

}

.config-modal-body::-webkit-scrollbar {
  width: 6px;
}

.config-modal-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* ==============================
   DETALLE DE EQUIPO - PRO FINAL
============================== */

.team-profile-page {
  padding: 20px 18px 120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.back-btn {
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  width: max-content;
}

/* HERO */
.team-profile-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, #2149f3, #111b5c);
  color: #fff;
  box-shadow: 0 18px 42px rgba(30, 64, 175, .28);
}

.team-hero-flag {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  flex: 0 0 110px;
}

.team-hero-flag .team-flag-img {
  width: 74px;
  height: 74px;
  border: 4px solid #fff;
  border-radius: 50%;
}

.team-hero-info h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 1000;
}

.team-country {
  margin-top: 12px;
  font-size: 17px;
  opacity: .92;
}

.team-status {
  
  margin-top: 16px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
}

/* KPIS */
.team-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

.team-stat-card {
  min-height: 130px;
  padding: 18px 8px;
  display: grid;
  place-items: center;
  text-align: center;
  border-right: 1px solid #e5ecf6;
}

.team-stat-card:last-child {
  border-right: none;
}

.team-stat-card span {
  font-size: 30px;
}

.team-stat-card strong {
  font-size: 34px;
  line-height: 1;
  font-weight: 1000;
  color: #0f172a;
}

.team-stat-card small {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

/* SECCIONES */
.team-section-card {
  background: #fff;
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, .07);
}

.team-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.team-section-header h3,
.team-options-title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 1000;
  color: #0f172a;
}

.team-section-header button {
  border: none;
  background: transparent;
  color: #2563eb;
  font-weight: 900;
  cursor: pointer;
}

/* PLANTEL */
.team-roster-list {
  display: grid;
  gap: 12px;
}

.team-player-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e8eef7;
}

.player-avatar{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#eef4ff,#f8fbff);
  color:#5b21b6;
  font-size:30px;
}

.team-player-row strong {
  font-size: 17px;
  font-weight: 1000;
  color: #0f172a;
}

.team-player-row span {
  padding: 8px 14px;
  border-radius: 999px;
  background: #dcfce7;
  color: #059669;
  font-weight: 900;
  font-size: 12px;
}

.team-add-player {
  width: 100%;
  margin-top: 14px;
  height: 64px;
  border-radius: 18px;
  border: 2px dashed #c8d6ee;
  background: #f8fbff;
  color: #1d4ed8;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.team-add-player span {
  margin-right: 8px;
}

/* OPCIONES */
.team-options-list {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e8eef7;
}

.team-options-list .more-row {
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid #e8eef7;
}

.team-options-list .more-row:last-child {
  border-bottom: none;
}

/* MÓVIL */
@media (max-width: 520px) {
  .team-profile-hero {
    padding: 26px;
    gap: 18px;
  }

  .team-hero-flag {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
  }

  .team-hero-flag .team-flag-img {
    width: 66px;
    height: 66px;
  }

  .team-hero-info h2 {
    font-size: 28px;
  }

  .team-profile-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .team-stat-card {
    min-height: 118px;
  }

  .team-stat-card span {
  font-size: 25px;
}

.team-status {
  position: relative;
  
}

.team-country{
  margin-bottom: 5px;
}
}

/* ... todo tu CSS actual ... */

/* ==============================
   DETALLE DE EQUIPO - PRO FINAL
============================== */

/* (el bloque grande que te mandé) */


/* ==============================
   AJUSTES FINALES
============================== */

.team-profile-page{
  padding-top: 16px;
  gap: 16px;
}

.team-profile-hero{
  min-height: 150px;
  padding: 24px 26px;
}

.team-hero-flag{
  width: 96px;
  height: 96px;
  flex-basis: 96px;
}

.team-hero-flag .team-flag-img{
  width: 68px;
  height: 68px;
}

.team-hero-info h2{
  font-size: 30px;
}

.team-country{
  font-size: 16px;
}

.team-profile-stats{
  margin-top: 2px;
}

.team-stat-card{
  min-height: 112px;
  padding: 14px 6px;
}

.team-stat-card span{
  font-size: 27px;
}

.team-stat-card strong{
  font-size: 31px;
}

.team-section-card{
  padding: 20px 18px;
}

.team-player-row{
  min-height: 78px;
}

.team-add-player{
  height: 58px;
}

/* Evita que el menú inferior tape el contenido */
.team-profile-page{
  padding-bottom: 145px;
}


/* ==============================
   CAMISETA CON BANDERA
============================== */

.shirt-flag {
  width: 74px;
  height: 66px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;

  clip-path: polygon(
    24% 0%, 76% 0%,
    100% 18%, 86% 40%,
    80% 100%, 20% 100%,
    14% 40%, 0% 18%
  );

  background: #eef4ff;
  box-shadow: 0 10px 22px rgba(15,23,42,.16);
}

.shirt-flag .team-flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
}

.team-hero-flag .shirt-flag {
  width: 104px;
  height: 92px;
}


/* ==============================
   PARTIDOS DEL EQUIPO
============================== */

.team-matches-page {
  padding: 20px 18px 130px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.team-matches-hero {
  background: linear-gradient(135deg, #2149f3, #111b5c);
  color: #fff;
  border-radius: 28px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 18px 42px rgba(30, 64, 175, .25);
}

.team-match-flag {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.16);
  flex-shrink: 0;
}

.team-match-flag .team-flag-img {
  width: 58px;
  height: 58px;
  border: 3px solid #fff;
  border-radius: 50%;
}

.team-matches-hero h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 1000;
}

.team-matches-hero p {
  margin: 6px 0 0;
  opacity: .85;
}

.team-matches-list {
  display: grid;
  gap: 14px;
}

.team-match-card {
  background: #fff;
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 14px 35px rgba(15,23,42,.07);
  border-left: 6px solid #cbd5e1;
}

.team-match-card.finalizado {
  border-left-color: #22c55e;
}

.team-match-card.en-vivo {
  border-left-color: #ef4444;
}

.team-match-card.pendiente {
  border-left-color: #2563eb;
}

.team-match-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.team-match-top span {
  padding: 7px 14px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.team-match-top strong {
  color: #1d4ed8;
  font-size: 16px;
}

.team-match-body {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  align-items: center;
  gap: 12px;
}

.team-match-side {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
}

.team-match-side strong {
  font-size: 14px;
  line-height: 1.2;
}

.mini-flag {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef4ff;
}

.mini-flag .team-flag-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.team-match-score {
  display: grid;
  place-items: center;
  min-height: 62px;
  border-radius: 18px;
  background: #f1f5ff;
  color: #0f172a;
}

.team-match-score strong {
  font-size: 24px;
  font-weight: 1000;
}

/* ==============================
   RESUMEN EQUIPO
============================== */

.team-summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

}

.team-summary div{

    background:#fff;

    border-radius:18px;

    padding:18px;

    text-align:center;

    box-shadow:0 10px 20px rgba(0,0,0,.06);

}

.team-summary strong{

    display:block;

    font-size:28px;

    color:#1d4ed8;

    font-weight:900;

}

.team-summary span{

    color:#64748b;

    font-weight:700;

}

.team-match-score{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

}

.team-match-score small{

    margin-top:4px;

    color:#64748b;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

}

.team-match-sets{

    margin-top:18px;

    display:flex;

    justify-content:center;

    gap:12px;

}

.team-match-sets span{

    padding:6px 12px;

    background:#eef4ff;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    color:#1d4ed8;

}

/*==================================
=      ESTADÍSTICAS DEL EQUIPO
===================================*/

.team-stats-page{
    padding:20px 18px 130px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* GRID ESTADÍSTICAS */

.stats-grid-pro{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.stat-box-pro{

    background:#fff;

    border-radius:22px;

    padding:24px 18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:10px;

    box-shadow:0 12px 30px rgba(15,23,42,.08);

    transition:.25s;

}

.stat-box-pro:hover{

    transform:translateY(-3px);

}

.stat-box-pro span{

    font-size:34px;

}

.stat-box-pro small{

    color:#64748b;

    font-size:13px;

    font-weight:700;

}

.stat-box-pro strong{

    font-size:30px;

    font-weight:900;

    color:#1d4ed8;

}

/* RESPONSIVE */

@media (max-width:520px){

    .stats-grid-pro{

        grid-template-columns:repeat(2,1fr);

    }

}

.performance-card {
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

.performance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.performance-header strong {
  font-size: 18px;
  color: #0f172a;
}

.performance-header span {
  color: #2563eb;
  font-weight: 900;
}

.performance-bar {
  height: 14px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.performance-bar div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563eb,#22c55e);
}

.streak-list {
  display: flex;
  gap: 10px;
}

.streak-list span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 1000;
}

.streak-list .win {
  background: #dcfce7;
  color: #16a34a;
}

.streak-list .loss {
  background: #fee2e2;
  color: #dc2626;
}

.logout-btn {
  margin-top: 8px;
  background: transparent;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  padding: 0;
}

.logout-btn:hover {
  color: #fff;
}

/* ==============================
   DASHBOARD PÚBLICO
============================== */

.public-dashboard {
  padding: 18px 16px 130px;
  display: grid;
  gap: 18px;
}

.public-hero-pro {
  min-height: 210px;
  border-radius: 30px;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(circle at 80% 20%, rgba(34,197,94,.35), transparent 28%),
    linear-gradient(135deg, #2563eb, #020617);
  color: #fff;
  box-shadow: 0 20px 50px rgba(37,99,235,.25);
  overflow: hidden;
}

.public-hero-content span {
  color: #bfdbfe;
  font-weight: 900;
  font-size: 14px;
}

.public-hero-content h1 {
  margin-top: 10px;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 1000;
}

.public-hero-content p {
  margin-top: 10px;
  color: #dbeafe;
  font-size: 15px;
}

.public-hero-status {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.public-hero-status b,
.public-hero-status small {
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-weight: 900;
  color: #fff;
}

.public-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.public-kpi-card {
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 20px;
  padding: 16px 10px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(15,23,42,.07);
}

.public-kpi-card span {
  display: block;
  font-size: 26px;
  margin-bottom: 8px;
}

.public-kpi-card strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  color: #2563eb;
  font-weight: 1000;
}

.public-kpi-card small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

/* =========================
   PROXIMO PARTIDO
========================= */

.public-next-card{

    background:#fff;

    border-radius:26px;

    padding:22px;

    box-shadow:0 12px 30px rgba(15,23,42,.07);

}

.public-next-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:22px;

}

.public-next-header h3{

    font-size:22px;

    margin-bottom:4px;

}

.public-next-header small{

    color:#64748b;

}

.next-time{

    background:#eff6ff;

    color:#2563eb;

    font-weight:900;

    padding:8px 14px;

    border-radius:999px;

}

.next-match-row{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:14px;

}

.next-team{

    text-align:center;

}

.next-flag{

    width:74px;

    height:74px;

    margin:auto;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:#f8fafc;

    font-size:42px;

    box-shadow:0 5px 18px rgba(15,23,42,.08);

    margin-bottom:10px;

}

.next-team strong{

    display:block;

    font-size:18px;

}

.next-vs{

    width:64px;

    height:64px;

    border-radius:20px;

    display:grid;

    place-items:center;

    background:#2563eb;

    color:white;

    font-size:22px;

    font-weight:900;

}

.next-status{

    margin-top:24px;

    display:flex;

    justify-content:center;

}

.next-status span{

    padding:10px 18px;

    border-radius:999px;

    background:#dbeafe;

    color:#1d4ed8;

    font-weight:900;

}

/* =========================
   TOP 3 PÚBLICO
========================= */

.public-top-card {
  background: #fff;
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.public-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.public-top-header h3 {
  font-size: 22px;
}

.public-top-header small {
  color: #64748b;
}

.public-top-header button {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 999px;
}

.public-top-list {
  display: grid;
  gap: 12px;
}

.public-top-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
}

.public-top-row.first {
  background: linear-gradient(135deg, rgba(250,204,21,.22), #fff);
  border: 1px solid rgba(250,204,21,.45);
}

.public-top-row > span {
  font-size: 28px;
}

.public-top-row strong {
  display: block;
  font-size: 16px;
}

.public-top-row small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.public-top-row b {
  color: #2563eb;
  font-size: 18px;
}

/* ==========================
   ÚLTIMOS RESULTADOS
========================== */

.public-results-card{

    background:#fff;

    border-radius:26px;

    padding:22px;

    box-shadow:0 12px 30px rgba(15,23,42,.07);

}

.public-results-header{

    margin-bottom:18px;

}

.public-results-header h3{

    font-size:22px;

}

.public-results-header small{

    color:#64748b;

}

.public-results-list{

    display:grid;

    gap:14px;

}

.public-result-row{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:10px;

    padding:14px;

    border-radius:18px;

    background:#f8fafc;

}

.result-team{

    text-align:center;

}

.result-team strong{

    display:block;

    margin-top:6px;

    font-size:14px;

}

.result-score{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:24px;

    font-weight:900;

    color:#2563eb;

}

/* ==========================
   HERO EN VIVO
========================== */

.live-hero{

    display:grid;

    gap:26px;

}

.live-badge{

    width:max-content;

    padding:10px 18px;

    border-radius:999px;

    background:#ef4444;

    color:white;

    font-weight:900;

    animation:pulseLive 1.2s infinite;

}

.live-match{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    text-align:center;

    gap:18px;

}

.live-match strong{

    display:block;

    margin-top:10px;

    font-size:20px;

}

.live-score{

    display:flex;

    gap:12px;

    align-items:center;

    font-size:48px;

    font-weight:1000;

}

@keyframes pulseLive{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}

.match-status-view{

    margin-top:18px;

    text-align:center;

    padding:12px;

    border-radius:14px;

    font-weight:900;

}

.match-status-view.pending{

    background:#eff6ff;

    color:#2563eb;

}

.match-status-view.live{

    background:#fee2e2;

    color:#dc2626;

}

/* ==================================================
   MESA DE CONTROL
================================================== */

.mesa-page{
    padding:20px 18px 120px;
    display:grid;
    gap:20px;
}

.mesa-hero{

    padding:28px;

    border-radius:28px;

    color:#fff;

    background:
    radial-gradient(circle at top right,
    rgba(255,255,255,.18),transparent 35%),
    linear-gradient(135deg,#ea580c,#b91c1c);

    box-shadow:0 18px 40px rgba(185,28,28,.25);

}

.mesa-hero span{

    font-size:13px;

    font-weight:900;

    letter-spacing:.12em;

    opacity:.9;

}

.mesa-hero h1{

    margin-top:10px;

    font-size:34px;

    font-weight:900;

}

.mesa-hero p{

    margin-top:10px;

    color:#fde68a;

}

.mesa-kpis{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

}

.mesa-kpis div{

    background:#fff;

    border-radius:20px;

    padding:18px;

    text-align:center;

    box-shadow:0 10px 24px rgba(15,23,42,.08);

}

.mesa-kpis strong{

    display:block;

    font-size:34px;

    color:#dc2626;

}

.mesa-kpis span{

    color:#64748b;

    font-size:13px;

    font-weight:700;

}

.mesa-match-card{

    background:#fff;

    border-radius:28px;

    padding:24px;

    box-shadow:0 10px 24px rgba(15,23,42,.08);

}

.mesa-match-card h3{

    margin-bottom:22px;

    font-size:24px;

}

.mesa-match{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    text-align:center;

    gap:18px;

}

.mesa-match strong{

    display:block;

    margin-top:10px;

    font-size:18px;

}

.mesa-match span{

    font-size:28px;

    font-weight:900;

    color:#dc2626;

}

.mesa-main-btn{

    width:100%;

    margin-top:24px;

    height:56px;

    border:none;

    border-radius:18px;

    background:#dc2626;

    color:white;

    font-size:16px;

    font-weight:900;

    cursor:pointer;

}

.mesa-actions{

    display:grid;

    gap:12px;

}

.mesa-actions button{

    height:52px;

    border-radius:18px;

    background:#fff;

    border:1px solid #e2e8f0;

    font-weight:800;

    cursor:pointer;

}

.mesa-hero.is-live {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 35%),
    linear-gradient(135deg, #ef4444, #7f1d1d);
  box-shadow: 0 18px 40px rgba(239,68,68,.28);
}

/* =====================================================
   RESPONSIVE EVENTOS / PANTALLA PÚBLICA
===================================================== */

/* Laptop / pantallas medianas */
@media (max-width: 1200px) {
  .event-center-full,
  .event-center {
    padding: 28px;
  }

  .event-header h1 {
    font-size: 44px;
  }

  .event-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .event-panel {
    padding: 26px;
  }

  .event-panel h2 {
    font-size: 28px;
  }

  .event-ticker {
    height: 62px;
    grid-template-columns: 220px 1fr 220px;
    font-size: 18px;
  }
}

/* Tablet horizontal */
@media (max-width: 900px) {
  .event-summary-grid,
  .event-footer {
    grid-template-columns: 1fr;
  }

  .event-header h1,
  .event-summary-screen h1 {
    font-size: 38px;
  }

  .event-panel {
    border-radius: 24px;
    padding: 22px;
  }

  .event-panel h2 {
    font-size: 24px;
  }

  .event-rank-row {
    grid-template-columns: 48px 1fr auto;
    font-size: 20px;
    gap: 12px;
    padding: 14px;
  }

  .event-next-match {
    font-size: 24px;
  }

  .event-ticker {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 58px;
    gap: 4px;
    padding: 10px 16px;
    text-align: center;
    font-size: 15px;
  }

  .ticker-left,
  .ticker-center,
  .ticker-right {
    text-align: center;
  }
}

/* Tablet vertical / móvil grande */
@media (max-width: 640px) {
  .event-center-full,
  .event-center {
    padding: 18px;
  }

  .event-header h1,
  .event-summary-screen h1 {
    font-size: 32px;
    line-height: 1.15;
  }

  .event-header small,
  .event-summary-screen > p {
    font-size: 15px;
  }

  .event-brand {
    padding: 8px 14px;
    font-size: 13px;
  }

  .event-panel {
    padding: 18px;
    border-radius: 22px;
  }

  .event-panel h2 {
    font-size: 22px;
  }

  .event-rank-row {
    grid-template-columns: 38px 1fr auto;
    font-size: 16px;
  }

  .event-rank-row span {
    font-size: 24px;
  }

  .event-rank-row b {
    font-size: 16px;
  }

  .event-next-match strong {
    font-size: 24px;
  }

  .event-next-match em {
    font-size: 30px;
  }

  .event-ticker {
    position: fixed;
    font-size: 13px;
    line-height: 1.25;
  }
}

/* Móvil pequeño */
@media (max-width: 430px) {
  .event-center-full,
  .event-center {
    padding: 14px;
  }

  .event-header h1,
  .event-summary-screen h1 {
    font-size: 26px;
  }

  .event-summary-grid {
    gap: 14px;
  }

  .event-panel {
    padding: 16px;
  }

  .event-rank-row {
    grid-template-columns: 34px 1fr auto;
    gap: 8px;
    padding: 12px;
    font-size: 14px;
  }

  .event-next-match {
    gap: 14px;
    font-size: 18px;
  }

  .event-ticker {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* TV / pantallas grandes */
@media (min-width: 1600px) {
  .event-center-full,
  .event-center {
    padding: 56px;
  }

  .event-header h1,
  .event-summary-screen h1 {
    font-size: 72px;
  }

  .event-panel h2 {
    font-size: 42px;
  }

  .event-rank-row {
    font-size: 34px;
  }

  .event-next-match {
    font-size: 38px;
  }

  .event-ticker {
    height: 82px;
    font-size: 26px;
  }
}

/* ===============================
   DASHBOARD PÚBLICO - EN VIVO
================================ */

.live-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.live-match > div:not(.live-score) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.live-match > div:not(.live-score) .team-flag-img,
.next-flag .team-flag-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.live-match strong,
.next-team strong {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.15;
  text-align: center;
  max-width: 130px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.live-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.live-score b {
  font-size: 42px;
  line-height: 1;
}

/* ===============================
   DASHBOARD PÚBLICO - PRÓXIMO
================================ */

.next-match-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 14px;
}

.next-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.next-flag {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f1f5ff;
  flex-shrink: 0;
}

.next-vs {
  align-self: center;
}

/* Móvil */
@media (max-width: 520px) {
  .live-match,
  .next-match-row {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  .live-match > div:not(.live-score) .team-flag-img,
  .next-flag .team-flag-img {
    width: 54px;
    height: 54px;
  }

  .next-flag {
    width: 62px;
    height: 62px;
  }

  .live-match strong,
  .next-team strong {
    font-size: 15px;
    max-width: 105px;
    min-height: 46px;
  }

  .live-score b {
    font-size: 34px;
  }
}

.live-match strong {
  max-width: 145px;
  font-size: 14px;
}

.public-hero-pro {
  padding-bottom: 28px;
}

.next-team strong {
  max-width: 130px;
}

/* ===============================
   TABLA - MEJORA VISUAL
================================ */

.table-row-card:first-child {
  border: 2px solid rgba(250, 204, 21, .65);
  background: linear-gradient(135deg, rgba(250,204,21,.14), #fff);
}

.table-position {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
}

.table-row-card:first-child .table-position {
  background: #fef3c7;
  color: #92400e;
}

.table-team-info small {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 800;
  color: #334155;
}

.table-points strong {
  font-size: 42px;
  line-height: 1;
}

.table-points span {
  letter-spacing: 3px;
}

.tabla-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  line-height: 1.4;
}

/* Banderas de la tabla */
.tabla-country img,
.tabla-team img,
.tabla-flag img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
}

/* Contenedor */
.tabla-country,
.tabla-flag {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ===============================
   TABLA PRO
================================ */

.tabla-card-pro {
  display: grid;
  grid-template-columns: 58px 1fr 70px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
}

.tabla-card-pro.is-first {
  border: 2px solid rgba(250, 204, 21, .55);
  background: linear-gradient(135deg, rgba(250,204,21,.14), #fff);
}

.tabla-rank {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #eff6ff;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
}

.tabla-team-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tabla-flag {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(15,23,42,.12);
  flex-shrink: 0;
}

.tabla-flag img,
.tabla-flag .team-flag-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.tabla-team-head strong {
  font-size: 17px;
  line-height: 1.15;
}

.tabla-stats-grid {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tabla-stats-grid span {
  background: #f1f5ff;
  color: #475569;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.tabla-stats-grid b {
  color: #2563eb;
}

.tabla-points-pro {
  text-align: center;
}

.tabla-points-pro strong {
  display: block;
  font-size: 38px;
  line-height: 1;
  color: #2563eb;
  font-weight: 1000;
}

.tabla-points-pro span {
  font-size: 12px;
  color: #64748b;
  font-weight: 900;
}

@media (max-width: 430px) {
  .tabla-card-pro {
    grid-template-columns: 50px 1fr 58px;
    padding: 14px;
  }

  .tabla-rank {
    width: 44px;
    height: 44px;
  }

  .tabla-team-head strong {
    font-size: 15px;
  }

  .tabla-stats-grid span {
    font-size: 10px;
    padding: 4px 7px;
  }

  .tabla-points-pro strong {
    font-size: 32px;
  }
}

.stat-win{
    background:#dcfce7 !important;
    color:#15803d !important;
}

.stat-loss{
    background:#fee2e2 !important;
    color:#dc2626 !important;
}

.stat-plus{
    background:#dbeafe !important;
    color:#2563eb !important;
}

.stat-minus{
    background:#fee2e2 !important;
    color:#dc2626 !important;
}

/* =====================================
   MESA - PRÓXIMO PARTIDO
===================================== */

.mesa-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}

.mesa-team {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mesa-team-flag {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-bottom: 10px;
}

.mesa-team-flag img,
.mesa-team-flag .team-flag-img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
}

.mesa-team strong {
  width: 100%;
  max-width: 125px;
  min-height: 46px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 16px;
  line-height: 1.15;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.mesa-vs {
  align-self: center;
  color: #ef2b2d;
  font-size: 28px;
  font-weight: 1000;
}

@media (max-width: 430px) {
  .mesa-match {
    gap: 8px;
  }

  .mesa-team-flag {
    width: 62px;
    height: 62px;
  }

  .mesa-team-flag img,
  .mesa-team-flag .team-flag-img {
    width: 56px;
    height: 56px;
  }

  .mesa-team strong {
    max-width: 105px;
    min-height: 50px;
    font-size: 14px;
  }

  .mesa-vs {
    font-size: 24px;
  }
}

/* =========================================
   DASHBOARD ADMIN - HERO PRO
========================================= */

.admin-hero-pro {
  padding: 22px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(34,197,94,.28), transparent 30%),
    linear-gradient(135deg, #2563eb, #111827);
  box-shadow: 0 18px 42px rgba(37,99,235,.22);
}

.admin-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.admin-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.admin-hero-pro h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 1000;
}

.admin-hero-pro p {
  margin-top: 10px;
  max-width: 520px;
  color: #dbeafe;
  font-size: 15px;
  line-height: 1.45;
}

.admin-status {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: #dcfce7;
  color: #047857;
  font-size: 12px;
  font-weight: 900;
}

.admin-hero-meta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-hero-meta span {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 850;
}

.admin-progress-block {
  margin-top: 22px;
}

.admin-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 900;
}

.admin-progress-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.18);
}

.admin-progress-bar div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #86efac);
}

@media (max-width: 520px) {
  .admin-hero-pro {
    padding: 22px;
  }

  .admin-hero-top {
    flex-direction: column;
  }

  .admin-hero-pro h1 {
    font-size: 30px;
  }

  .admin-status {
    align-self: flex-start;
  }
}




/* =====================================
   DASHBOARD ADMIN - ESTRUCTURA NUEVA
===================================== */

.admin-dashboard {
  display: grid;
  gap: 18px;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-kpi-grid .kpi-card-pro {
  min-width: 0;
  min-height: 112px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.admin-kpi-grid .kpi-icon {
  margin: 0 auto 8px;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-dashboard-grid > .card {
  min-width: 0;
  height: 100%;
}

@media (max-width: 1000px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .admin-kpi-grid {
    gap: 8px;
  }

  .admin-kpi-grid .kpi-card-pro {
    min-height: 104px;
    padding: 12px 5px;
    border-radius: 18px;
  }

  .admin-kpi-grid .kpi-icon {
    width: 34px;
    height: 34px;
    font-size: 16px;
    font-weight: 900;
  }

  .admin-kpi-grid .kpi-card-pro h3 {
    font-size: 24px;
  }

  .admin-kpi-grid .kpi-card-pro p {
    font-size: 10px;
  }
}

/* =====================================
   DASHBOARD PÚBLICO - EQUIPOS
===================================== */

.public-teams-card {
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(15,23,42,.07);
}

.public-teams-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.public-teams-header h3 {
  margin: 0;
  font-size: 19px;
}

.public-teams-header small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.public-teams-header button {
  border: 0;
  background: #eff6ff;
  color: #2563eb;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.public-teams-list {
  display: grid;
  gap: 10px;
}

.public-team-row {
  width: 100%;
  border: 1px solid #e8eef7;
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  display: grid;
  grid-template-columns: 54px 1fr 22px;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.public-team-flag {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #eff6ff;
  display: grid;
  place-items: center;
}

.public-team-flag .team-flag-img {
  width: 42px;
  height: 42px;
}

.public-team-info {
  min-width: 0;
}

.public-team-info strong {
  display: block;
  font-size: 15px;
  color: #0f172a;
}

.public-team-info small {
  display: block;
  margin-top: 3px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
}

.public-team-info p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-team-arrow {
  color: #94a3b8;
  font-size: 24px;
  font-weight: 900;
}

@media (max-width: 430px) {
  .public-teams-card {
    padding: 16px;
  }

  .public-team-row {
    grid-template-columns: 48px 1fr 18px;
    gap: 10px;
    padding: 11px;
  }

  .public-team-flag {
    width: 46px;
    height: 46px;
  }

  .public-team-flag .team-flag-img {
    width: 38px;
    height: 38px;
  }

  .public-team-info strong {
    font-size: 14px;
  }

  .public-team-info p {
    font-size: 11px;
  }
}

/* =====================================
   MODAL PÚBLICO DE PLANTEL
===================================== */

.public-squad-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  padding: 18px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(7px);
  animation: publicSquadFade .2s ease;
}

.public-squad-modal {
  width: min(100%, 430px);
  max-height: min(82vh, 680px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .26);
  animation: publicSquadIn .24s ease;
}

.public-squad-header {
  flex-shrink: 0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(34,197,94,.25), transparent 30%),
    linear-gradient(135deg, #2563eb, #0f172a);
}

.public-squad-team {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.public-squad-flag {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.13);
}

.public-squad-flag .team-flag-img {
  width: 54px;
  height: 54px;
}

.public-squad-team small {
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.public-squad-team h2 {
  margin: 4px 0 0;
  font-size: 23px;
  line-height: 1.15;
}

.public-squad-team p {
  margin: 5px 0 0;
  color: #dbeafe;
  font-size: 12px;
}

.public-squad-close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.public-squad-body {
  min-height: 140px;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  gap: 10px;
  background: #f7f9fd;
}

.public-squad-player {
  padding: 12px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #e4ebf5;
  border-radius: 18px;
  background: #fff;
}

.public-squad-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 16px;
  font-weight: 1000;
}

.public-squad-player-info {
  min-width: 0;
}

.public-squad-player-info strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
}

.public-squad-player-info span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
}

.public-squad-status {
  padding: 6px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 9px;
  font-weight: 900;
}

.public-squad-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.public-squad-empty span {
  font-size: 42px;
}

.public-squad-empty h3 {
  margin: 10px 0 0;
  font-size: 18px;
}

.public-squad-empty p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.public-squad-body::-webkit-scrollbar {
  width: 6px;
}

.public-squad-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd5e1;
}

@keyframes publicSquadFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes publicSquadIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 430px) {
  .public-squad-overlay {
    padding: 12px;
  }

  .public-squad-modal {
    max-height: 86vh;
    border-radius: 24px;
  }

  .public-squad-header {
    padding: 16px;
  }

  .public-squad-flag {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 19px;
  }

  .public-squad-flag .team-flag-img {
    width: 48px;
    height: 48px;
  }

  .public-squad-team h2 {
    font-size: 19px;
  }

  .public-squad-player {
    grid-template-columns: 44px 1fr;
  }

  .public-squad-status {
    grid-column: 2;
    justify-self: start;
  }
}

.public-squad-modal {
  width: min(92vw, 410px);
}

.public-squad-player {
  min-height: 72px;
}

.public-squad-player-info strong {
  font-size: 15px;
}

.live-vs{
    font-size:34px;
    font-weight:900;
    color:#fff;
    letter-spacing:2px;
}

.live-status{
    margin-top:18px;
    text-align:center;
    color:#dbeafe;
    font-size:15px;
    font-weight:700;
    opacity:.9;
}

/* =====================================
   ÚLTIMOS RESULTADOS - UNIFORME
===================================== */

.public-results-list {
  display: grid;
  gap: 12px;
}

.public-result-row {
  min-height: 126px;
  padding: 14px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  background: #f8fafc;
}

.result-team {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.result-flag {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.result-flag .team-flag-img,
.result-flag img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
}

.result-team strong {
  width: 100%;
  max-width: 115px;
  min-height: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
  overflow-wrap: break-word;
}

.result-score {
  min-width: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #315bea;
  white-space: nowrap;
}

.result-score b {
  font-size: 25px;
  line-height: 1;
  font-weight: 1000;
}

.result-score span {
  color: #64748b;
  font-size: 19px;
  font-weight: 900;
}

@media (max-width: 430px) {
  .public-result-row {
    min-height: 118px;
    padding: 12px 8px;
    gap: 8px;
  }

  .result-flag {
    width: 52px;
    height: 52px;
  }

  .result-flag .team-flag-img,
  .result-flag img {
    width: 48px;
    height: 48px;
  }

  .result-team strong {
    max-width: 98px;
    min-height: 36px;
    font-size: 12px;
  }

  .result-score {
    min-width: 62px;
    gap: 5px;
  }

  .result-score b {
    font-size: 22px;
  }

  .result-score span {
    font-size: 17px;
  }
}


#btnGuardarJugador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

#btnGuardarJugador:disabled,
#btnCancelarJugador:disabled {
  cursor: wait;
  opacity: .78;
  transform: none;
}

.btn-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;

  border: 3px solid rgba(255, 255, 255, .38);
  border-top-color: #fff;
  border-radius: 50%;

  animation: btnSpinner .7s linear infinite;
}

@keyframes btnSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* Evitar zoom, selección y gestos en el marcador */
.scoreboard-landscape,
.scoreboard-game,
.score-main,
.score-team-panel,
.score-side {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Las zonas donde se suman puntos */
.score-team-panel,
.score-side {
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.team-identity-logo {
  width: 100%;
  height: 100%;
  max-width: 72px;
  max-height: 72px;

  object-fit: contain;

  display: block;

  margin: auto;

  border-radius: 50%;
}


/* =========================================================
   USUARIOS
   ========================================================= */

.usuarios-page {
  display: grid;
  gap: 16px;
}


/* =========================================================
   HERO
   ========================================================= */

.usuarios-hero {
  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr) auto;

  align-items: center;

  gap: 22px;

  padding: 24px;

  min-height: 150px;

  border: none;

  border-radius: 26px;

  background:
    linear-gradient(
      135deg,
      #2563eb 0%,
      #172554 55%,
      #020617 100%
    );

  color: #ffffff;

  box-shadow:
    0 18px 40px
    rgba(15, 23, 42, .18);
}


.usuarios-hero::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  top: -120px;
  right: -70px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .08);
}


.usuarios-hero::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  right: 100px;
  bottom: -90px;

  border-radius: 50%;

  background:
    rgba(96, 165, 250, .14);
}


.usuarios-hero-info,
.usuarios-hero > button {
  position: relative;
  z-index: 2;
}


.usuarios-eyebrow {
  display: inline-block;

  margin-bottom: 7px;

  color: #bfdbfe;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: .13em;
}


.usuarios-hero h2 {
  margin: 0;

  font-size: 29px;

  line-height: 1.08;

  color: #ffffff;
}


.usuarios-hero p {
  margin: 8px 0 0;

  max-width: 470px;

  color: #dbeafe;

  font-size: 14px;

  line-height: 1.5;
}


/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.usuarios-primary-btn {
  min-height: 48px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 0 20px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 15px;

  background:
    rgba(255,255,255,.14);

  color: #ffffff;

  font-family: inherit;

  font-size: 14px;

  font-weight: 900;

  cursor: pointer;

  backdrop-filter:
    blur(10px);

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.12);

  transition:
    transform .2s ease,
    background .2s ease;
}


.usuarios-primary-btn:hover {
  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.20);
}


.usuarios-primary-btn:disabled {
  opacity: .6;

  cursor: wait;

  transform: none;
}


/* =========================================================
   PANEL FORMULARIO
   ========================================================= */

.usuarios-form-panel {
  padding: 22px;

  border-radius: 22px;

  background: var(--card);

  border:
    1px solid
    var(--border);

  box-shadow:
    var(--shadow-sm);
}


.usuarios-form-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 20px;
}


.usuarios-form-header .usuarios-eyebrow {
  color: var(--primary);
}


.usuarios-form-header h3 {
  margin: 2px 0 4px;

  color: var(--text);

  font-size: 21px;
}


.usuarios-form-header p {
  margin: 0;

  color: var(--muted);

  font-size: 13px;
}


.usuarios-close-btn {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    var(--primary-soft);

  color: var(--primary);

  font-size: 22px;

  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.usuarios-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 15px;
}


.usuarios-field {
  display: grid;

  gap: 7px;
}


.usuarios-field-full {
  grid-column:
    1 / -1;
}


.usuarios-field > span {
  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}


.usuarios-field input,
.usuarios-field select {
  width: 100%;

  min-height: 46px;

  box-sizing: border-box;

  padding:
    0 13px;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    #f8fafc;

  color:
    var(--text);

  font-family:
    inherit;

  font-size: 14px;

  outline: none;

  transition:
    .2s ease;
}


.usuarios-field input:focus,
.usuarios-field select:focus {
  border-color:
    #60a5fa;

  background:
    #ffffff;

  box-shadow:
    0 0 0 4px
    rgba(37,99,235,.08);
}


.usuarios-form-actions {
  display: flex;

  justify-content:
    flex-end;

  gap: 10px;

  margin-top: 20px;
}


.usuarios-form-actions
.usuarios-primary-btn {
  min-width: 150px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #4f7cff
    );

  border: none;

  box-shadow:
    0 12px 25px
    rgba(37,99,235,.22);
}


.usuarios-secondary-btn {
  min-height: 46px;

  padding:
    0 18px;

  border:
    1px solid
    var(--border);

  border-radius:
    13px;

  background:
    #ffffff;

  color:
    var(--text);

  font-family:
    inherit;

  font-weight:
    900;

  cursor:
    pointer;
}


/* =========================================================
   CONTENEDOR LISTADO
   ========================================================= */

.usuarios-content {
  padding: 22px;

  border-radius: 24px;

  background: var(--card);

  border:
    1px solid
    var(--border);

  box-shadow:
    var(--shadow-sm);
}


.usuarios-list-header {
  margin-bottom: 18px;
}


.usuarios-list-header
.usuarios-eyebrow {
  margin-bottom: 5px;

  color: var(--primary);
}


.usuarios-list-header h3 {
  margin: 0;

  color: var(--text);

  font-size: 20px;
}


.usuarios-list-header p {
  margin: 5px 0 0;

  color: var(--muted);

  font-size: 13px;
}


.usuarios-list {
  display: grid;

  gap: 11px;
}


/* =========================================================
   TARJETA USUARIO
   ========================================================= */

.usuario-row {
  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 15px;

  padding: 14px 15px;

  border:
    1px solid
    var(--border);

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f8fafc
    );

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.usuario-row::before {
  content: "";

  position: absolute;

  left: 0;
  top: 10px;
  bottom: 10px;

  width: 3px;

  border-radius:
    0 5px 5px 0;

  background:
    linear-gradient(
      #2563eb,
      #60a5fa
    );
}


.usuario-row:hover {
  transform:
    translateY(-2px);

  border-color:
    #dbeafe;

  box-shadow:
    0 12px 24px
    rgba(15,23,42,.07);
}


.usuario-identidad {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 12px;
}


.usuario-avatar {
  width: 46px;
  height: 46px;

  flex:
    0 0 46px;

  display: grid;

  place-items: center;

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #dbeafe,
      #eff6ff
    );

  color:
    #1e40af;

  font-size:
    15px;

  font-weight:
    1000;

  box-shadow:
    inset 0 0 0 1px
    rgba(37,99,235,.08);
}


.usuario-datos {
  min-width: 0;
}


.usuario-datos strong {
  display: block;

  color:
    var(--text);

  font-size:
    15px;

  font-weight:
    900;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.usuario-datos small {
  display: block;

  margin-top: 4px;

  color:
    var(--muted);

  font-size:
    12px;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.usuario-meta {
  display: flex;

  align-items: center;

  justify-content:
    flex-end;

  gap: 7px;

  flex-wrap: wrap;
}


.usuario-rol {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    6px 10px;

  border-radius:
    999px;

  background:
    var(--primary-soft);

  color:
    #1d4ed8;

  font-size:
    10px;

  font-weight:
    1000;

  white-space:
    nowrap;
}


.usuario-equipo {
  padding:
    6px 10px;

  border-radius:
    999px;

  background:
    #f8fafc;

  color:
    var(--muted);

  border:
    1px solid
    var(--border);

  font-size:
    10px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.usuario-estado {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    6px 10px;

  border-radius:
    999px;

  background:
    #dcfce7;

  color:
    #15803d;

  font-size:
    10px;

  font-weight:
    1000;
}


.usuario-estado::before {
  content: "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #22c55e;
}


/* =========================================================
   MENSAJES
   ========================================================= */

.usuarios-mensaje {
  padding:
    12px 15px;

  border-radius:
    14px;

  font-size:
    13px;

  font-weight:
    800;
}


.usuarios-mensaje.ok {
  color:
    #15803d;

  background:
    #dcfce7;

  border:
    1px solid
    #bbf7d0;
}


.usuarios-mensaje.error {
  color:
    #b91c1c;

  background:
    #fee2e2;

  border:
    1px solid
    #fecaca;
}


.usuarios-loading,
.usuarios-empty {
  padding:
    28px 10px;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    13px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

  .usuarios-hero {
    grid-template-columns:
      1fr;

    min-height:
      auto;

    padding:
      22px;
  }


  .usuarios-primary-btn {
    width:
      100%;
  }


  .usuarios-content,
  .usuarios-form-panel {
    padding:
      18px;
  }


  .usuarios-form-grid {
    grid-template-columns:
      1fr;
  }


  .usuarios-field-full {
    grid-column:
      auto;
  }


  .usuarios-form-actions {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;
  }


  .usuarios-form-actions
  .usuarios-primary-btn {
    width:
      auto;

    min-width:
      0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

  .usuarios-page {
    gap:
      14px;
  }


  .usuarios-hero {
    border-radius:
      22px;

    padding:
      20px;
  }


  .usuarios-hero h2 {
    font-size:
      25px;
  }


  .usuarios-hero p {
    font-size:
      13px;
  }


  .usuarios-content {
    padding:
      16px;

    border-radius:
      22px;
  }


  .usuario-row {
    grid-template-columns:
      1fr;

    gap:
      11px;

    padding:
      13px;
  }


  .usuario-avatar {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;

    border-radius:
      13px;
  }


  .usuario-meta {
    justify-content:
      flex-start;

    padding-left:
      54px;
  }


  .usuario-rol,
  .usuario-equipo,
  .usuario-estado {
    font-size:
      9px;

    padding:
      5px 8px;
  }


  .usuarios-form-actions {
    grid-template-columns:
      1fr;
  }


  .usuarios-secondary-btn,
  .usuarios-form-actions
  .usuarios-primary-btn {
    width:
      100%;
  }

}

/* Ocultar correctamente campos dinámicos */
.usuarios-page [hidden] {
  display: none !important;
}

@media (max-width: 520px) {

  .usuarios-page {
    padding-bottom: 140px;
  }

  .usuarios-form-panel {
    margin-bottom: 20px;
  }

  .usuarios-form-actions {
    display: flex;
    flex-direction: column;
  }

  .usuarios-form-actions
  .usuarios-primary-btn {
    order: 1;
  }

  .usuarios-secondary-btn {
    order: 2;
  }
}


/* =========================================================
   USUARIOS - ACCIONES COMPACTAS
   ========================================================= */

.usuario-acciones {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  margin-top: 8px;
}


/* ---------------------------------------------------------
   BOTÓN BASE
   --------------------------------------------------------- */

.usuario-accion-btn {
  appearance: none;

  border: 0;
  outline: none;

  cursor: pointer;

  min-height: 30px;

  padding: 6px 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  border-radius: 9px;

  font-family: inherit;

  font-size: 11px;
  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}


.usuario-accion-btn:hover {
  transform: translateY(-1px);
}


.usuario-accion-btn:active {
  transform: translateY(0);
}


.usuario-accion-btn:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}


/* ---------------------------------------------------------
   EDITAR
   --------------------------------------------------------- */

.usuario-accion-btn.editar {
  color: #2563eb;

  background: #eff6ff;

  border: 1px solid #dbeafe;
}


.usuario-accion-btn.editar:hover {
  background: #dbeafe;
}


/* ---------------------------------------------------------
   DESACTIVAR
   --------------------------------------------------------- */

.usuario-accion-btn.desactivar {
  color: #64748b;

  background: #f8fafc;

  border: 1px solid #e2e8f0;
}


.usuario-accion-btn.desactivar:hover {
  color: #b91c1c;

  background: #fef2f2;

  border-color: #fecaca;
}


/* ---------------------------------------------------------
   ACTIVAR
   --------------------------------------------------------- */

.usuario-accion-btn.activar {
  color: #15803d;

  background: #ecfdf5;

  border: 1px solid #bbf7d0;
}


.usuario-accion-btn.activar:hover {
  background: #dcfce7;
}


/* ---------------------------------------------------------
   TU CUENTA
   --------------------------------------------------------- */

.usuario-cuenta-actual {
  min-height: 30px;

  padding: 6px 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  color: #64748b;

  background: transparent;

  border: 1px solid #e2e8f0;

  font-size: 10px;
  font-weight: 800;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   USUARIO INACTIVO
   --------------------------------------------------------- */

.usuario-row-inactivo {
  opacity: 0.78;
}


.usuario-row-inactivo .usuario-avatar {
  filter: grayscale(0.65);
}


.usuario-row-inactivo .usuario-datos strong {
  color: #64748b;
}


/* ---------------------------------------------------------
   ESTADOS
   --------------------------------------------------------- */

.usuario-estado.activo {
  color: #15803d;
  background: #dcfce7;
}


.usuario-estado.inactivo {
  color: #dc2626;
  background: #fee2e2;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .usuario-acciones {
    justify-content: flex-start;

    gap: 6px;

    margin-top: 7px;
  }


  .usuario-accion-btn {
    flex: 0 0 auto;

    min-height: 29px;

    padding: 6px 9px;

    font-size: 10px;
  }


  .usuario-cuenta-actual {
    flex: 0 0 auto;

    min-height: 29px;

    padding: 6px 9px;

    font-size: 10px;
  }

}


/* =========================================================
   LIGAYA - CONFIRMACIÓN
   ========================================================= */

.ligaya-confirm-overlay {
  position: fixed;
  inset: 0;

  z-index: 100000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 22px;

  background: rgba(2, 8, 23, 0.58);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  opacity: 0;

  transition:
    opacity 0.18s ease;
}


.ligaya-confirm-overlay.show {
  opacity: 1;
}


.ligaya-confirm-card {
  width: min(
    360px,
    100%
  );

  padding: 26px 22px 20px;

  background: #ffffff;

  border: 1px solid #e5edf7;

  border-radius: 24px;

  text-align: center;

  box-shadow:
    0 28px 70px
    rgba(15, 23, 42, 0.28);

  transform:
    translateY(14px)
    scale(0.97);

  transition:
    transform 0.18s ease;
}


.ligaya-confirm-overlay.show
.ligaya-confirm-card {
  transform:
    translateY(0)
    scale(1);
}


.ligaya-confirm-icon {
  width: 56px;
  height: 56px;

  margin:
    0 auto
    15px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  font-size: 25px;
  font-weight: 900;

  color: #2563eb;

  background: #eff6ff;
}


.ligaya-confirm-icon.success {
  color: #15803d;
  background: #dcfce7;
}


.ligaya-confirm-icon.danger {
  color: #dc2626;
  background: #fee2e2;
}


.ligaya-confirm-card h3 {
  margin: 0;

  color: #0f172a;

  font-size: 20px;
  font-weight: 900;
}


.ligaya-confirm-card p {
  margin:
    9px 0
    0;

  color: #64748b;

  font-size: 14px;
  line-height: 1.5;
}


.ligaya-confirm-actions {
  display: flex;

  gap: 10px;

  margin-top: 22px;
}


.ligaya-confirm-actions button {
  flex: 1;

  min-height: 43px;

  padding: 10px 14px;

  border-radius: 13px;

  font-family: inherit;

  font-size: 13px;
  font-weight: 850;

  cursor: pointer;
}


.ligaya-confirm-cancel {
  color: #475569;

  background: #f8fafc;

  border: 1px solid #e2e8f0;
}


.ligaya-confirm-accept {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  border: 1px solid transparent;
}


.ligaya-confirm-accept.success {
  background:
    linear-gradient(
      135deg,
      #22c55e,
      #15803d
    );
}


.ligaya-confirm-accept.danger {
  background:
    linear-gradient(
      135deg,
      #ef4444,
      #dc2626
    );
}


@media (max-width: 420px) {

  .ligaya-confirm-overlay {
    padding: 18px;
  }


  .ligaya-confirm-card {
    padding:
      24px 18px
      18px;
  }


  .ligaya-confirm-actions {
    gap: 8px;
  }

}

/* =========================================================
   MI CUENTA
   ========================================================= */

.mi-cuenta-page {
  width: 100%;
  display: grid;
  gap: 18px;
  padding-bottom: 120px;
}


/* =========================================================
   HERO / PERFIL
   ========================================================= */

.mi-cuenta-hero {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  gap: 18px;

  padding: 24px;

  border-radius: 26px;

  background:
    linear-gradient(
      135deg,
      #071b3b 0%,
      #0b2f63 55%,
      #2563eb 100%
    );

  box-shadow:
    0 20px 45px
    rgba(15, 23, 42, 0.16);
}


.mi-cuenta-hero::after {
  content: "";

  position: absolute;
  width: 170px;
  height: 170px;

  right: -60px;
  top: -70px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.08);
}


.mi-cuenta-avatar {
  position: relative;
  z-index: 1;

  width: 72px;
  height: 72px;
  min-width: 72px;

  display: grid;
  place-items: center;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dbeafe
    );

  color: #1d4ed8;

  font-size: 24px;
  font-weight: 950;

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.14);
}


.mi-cuenta-hero-info {
  position: relative;
  z-index: 1;
}


.mi-cuenta-eyebrow {
  display: block;

  margin-bottom: 5px;

  color: #93c5fd;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}


.mi-cuenta-hero h2 {
  margin: 0;

  color: #ffffff;

  font-size: 24px;
  line-height: 1.15;
  font-weight: 950;
}


.mi-cuenta-hero p {
  margin: 7px 0 0;

  max-width: 420px;

  color: #cbd5e1;

  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.mi-cuenta-card {
  padding: 22px;

  background: #ffffff;

  border: 1px solid #e5edf7;

  border-radius: 24px;

  box-shadow:
    0 14px 35px
    rgba(15, 23, 42, 0.07);
}


.mi-cuenta-card-header {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 20px;
}


.mi-cuenta-card-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background: #eff6ff;

  font-size: 21px;
}


.mi-cuenta-card-icon.seguridad {
  background: #ecfdf5;
}


.mi-cuenta-card-header h3 {
  margin: 0;

  color: #0f172a;

  font-size: 18px;
  font-weight: 900;
}


.mi-cuenta-card-header p {
  margin: 4px 0 0;

  color: #64748b;

  font-size: 12px;
}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.mi-cuenta-info-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.mi-cuenta-info-item {
  min-height: 82px;

  padding: 15px 16px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;

  border-radius: 17px;

  background: #f8fafc;

  border: 1px solid #edf2f7;
}


.mi-cuenta-info-item span {
  color: #64748b;

  font-size: 11px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.mi-cuenta-info-item strong {
  color: #0f172a;

  font-size: 14px;
  font-weight: 900;

  overflow-wrap: anywhere;
}


/* =========================================================
   ROLES
   ========================================================= */

.mi-cuenta-role {
  width: fit-content;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 11px !important;
}


.mi-cuenta-role.admin {
  color: #1d4ed8;

  background: #dbeafe;
}


.mi-cuenta-role.mesa {
  color: #7c3aed;

  background: #ede9fe;
}


.mi-cuenta-role.delegado {
  color: #0369a1;

  background: #e0f2fe;
}


/* =========================================================
   FORMULARIO DE CONTRASEÑA
   ========================================================= */

.mi-cuenta-password-form {
  display: grid;
  gap: 15px;
}


.mi-cuenta-field {
  display: grid;
  gap: 7px;
}


.mi-cuenta-field > span {
  color: #334155;

  font-size: 12px;
  font-weight: 850;
}


.mi-cuenta-password-wrap {
  position: relative;
}


.mi-cuenta-password-wrap input {
  width: 100%;
  height: 47px;

  box-sizing: border-box;

  padding:
    0 48px
    0 14px;

  border: 1px solid #dbe3ee;

  border-radius: 14px;

  outline: none;

  background: #f8fafc;

  color: #0f172a;

  font-family: inherit;
  font-size: 14px;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}


.mi-cuenta-password-wrap input::placeholder {
  color: #94a3b8;
}


.mi-cuenta-password-wrap input:focus {
  border-color: #3b82f6;

  background: #ffffff;

  box-shadow:
    0 0 0 4px
    rgba(59, 130, 246, 0.10);
}


.mi-cuenta-eye {
  position: absolute;

  top: 50%;
  right: 7px;

  transform: translateY(-50%);

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 0;

  border-radius: 10px;

  background: transparent;

  cursor: pointer;

  font-size: 15px;
}


.mi-cuenta-eye:hover {
  background: #eaf2ff;
}


/* =========================================================
   CONSEJO DE SEGURIDAD
   ========================================================= */

.mi-cuenta-password-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 13px 14px;

  border-radius: 15px;

  background: #f8fafc;

  border: 1px solid #e5edf7;
}


.mi-cuenta-password-hint > span {
  flex: 0 0 auto;

  font-size: 17px;
}


.mi-cuenta-password-hint p {
  margin: 0;

  color: #64748b;

  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   BOTÓN GUARDAR
   ========================================================= */

.mi-cuenta-save-btn {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 18px;

  border: 0;

  border-radius: 15px;

  cursor: pointer;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  font-family: inherit;
  font-size: 13px;
  font-weight: 900;

  box-shadow:
    0 10px 24px
    rgba(37, 99, 235, 0.22);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}


.mi-cuenta-save-btn:hover {
  transform: translateY(-1px);

  box-shadow:
    0 14px 30px
    rgba(37, 99, 235, 0.28);
}


.mi-cuenta-save-btn:active {
  transform: translateY(0);
}


.mi-cuenta-save-btn:disabled {
  opacity: 0.65;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .mi-cuenta-page {
    gap: 14px;

    padding-bottom: 135px;
  }


  .mi-cuenta-hero {
    padding: 20px;

    border-radius: 22px;

    gap: 14px;
  }


  .mi-cuenta-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;

    border-radius: 18px;

    font-size: 20px;
  }


  .mi-cuenta-hero h2 {
    font-size: 20px;
  }


  .mi-cuenta-hero p {
    font-size: 12px;
  }


  .mi-cuenta-card {
    padding: 18px;

    border-radius: 21px;
  }


  .mi-cuenta-info-grid {
    grid-template-columns: 1fr;
  }


  .mi-cuenta-info-item {
    min-height: 68px;

    padding: 13px 14px;
  }


  .mi-cuenta-password-wrap input {
    height: 46px;

    font-size: 13px;
  }


  .mi-cuenta-save-btn {
    width: 100%;
  }
}

/* =========================================================
   MI CUENTA - INFORMACIÓN COMPACTA EN MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .mi-cuenta-card:not(.seguridad) {
    padding: 16px;
  }


  .mi-cuenta-card:not(.seguridad)
  .mi-cuenta-card-header {
    margin-bottom: 14px;
    gap: 10px;
  }


  .mi-cuenta-card:not(.seguridad)
  .mi-cuenta-card-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    border-radius: 14px;

    font-size: 19px;
  }


  .mi-cuenta-card:not(.seguridad)
  .mi-cuenta-card-header h3 {
    font-size: 17px;
  }


  .mi-cuenta-info-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 9px;
  }


  /*
   * NOMBRE ocupa toda la primera fila
   */
  .mi-cuenta-info-item:first-child {
    grid-column: 1 / -1;
  }


  .mi-cuenta-info-item {
    min-height: 58px;

    padding: 11px 13px;

    border-radius: 14px;

    gap: 4px;
  }


  .mi-cuenta-info-item span {
    font-size: 10px;
  }


  .mi-cuenta-info-item strong {
    font-size: 13px;
  }


  .mi-cuenta-role {
    padding: 5px 8px;

    font-size: 10px !important;
  }

}

/* =========================================================
   JUGADORES - ACCIONES
   ========================================================= */

.player-list-card.player-card-actions {
  display: grid;

  grid-template-columns:
    auto minmax(0, 1fr) auto;

  grid-template-areas:
    "avatar info estado"
    "acciones acciones acciones";

  align-items: center;

  column-gap: 12px;
}


.player-card-actions
.player-number {
  grid-area: avatar;
}


.player-card-actions
.player-info {
  grid-area: info;

  min-width: 0;
}


.player-card-actions
.player-status {
  grid-area: estado;
}


.player-actions {
  grid-area: acciones;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  margin-top: 9px;
}


.player-action-btn {
  appearance: none;

  min-height: 30px;

  padding: 6px 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}


.player-action-btn:hover {
  transform:
    translateY(-1px);
}


.player-action-btn:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}


.player-action-btn.editar {
  color: #2563eb;

  background: #eff6ff;

  border:
    1px solid #dbeafe;
}


.player-action-btn.desactivar {
  color: #64748b;

  background: #f8fafc;

  border:
    1px solid #e2e8f0;
}


.player-action-btn.desactivar:hover {
  color: #b91c1c;

  background: #fef2f2;

  border-color: #fecaca;
}


.player-action-btn.activar {
  color: #15803d;

  background: #ecfdf5;

  border:
    1px solid #bbf7d0;
}


.player-status.activo {
  color: #15803d;

  background: #dcfce7;
}


.player-status.inactivo {
  color: #dc2626;

  background: #fee2e2;
}


.player-card-inactivo {
  opacity: 0.78;
}


.player-card-inactivo
.player-number {
  filter:
    grayscale(0.7);
}


.player-card-inactivo
.player-info h3 {
  color: #64748b;
}


@media (max-width: 620px) {

  .player-list-card.player-card-actions {
    column-gap: 9px;
  }


  .player-actions {
    justify-content:
      flex-start;

    gap: 6px;

    margin-top: 8px;
  }


  .player-action-btn {
    min-height: 29px;

    padding: 6px 9px;

    font-size: 10px;
  }
}

/* =========================================================
   EDITAR JUGADOR - BOTONES
   ========================================================= */

#modalEditarJugador .modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: 12px;
  margin-top: 22px;
}


#modalEditarJugador
#btnCancelarEditarJugador,
#modalEditarJugador
#btnGuardarEditarJugador {
  width: 100%;
  min-height: 56px;

  padding: 0 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 17px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 900;

  line-height: 1;
  white-space: nowrap;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}


#modalEditarJugador
#btnCancelarEditarJugador {
  color: #2563eb;

  background: #eff6ff;

  border: 1px solid #dbeafe;
}


#modalEditarJugador
#btnGuardarEditarJugador {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #2563eb
    );

  border: 0;

  box-shadow:
    0 10px 24px
    rgba(37, 99, 235, 0.24);
}


#modalEditarJugador
#btnGuardarEditarJugador:hover {
  transform: translateY(-1px);

  box-shadow:
    0 14px 28px
    rgba(37, 99, 235, 0.30);
}


#modalEditarJugador
#btnGuardarEditarJugador:active,
#modalEditarJugador
#btnCancelarEditarJugador:active {
  transform: scale(0.98);
}


#modalEditarJugador
#btnGuardarEditarJugador:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}


@media (max-width: 380px) {

  #modalEditarJugador
  .modal-actions {
    grid-template-columns: 1fr 1.12fr;
    gap: 9px;
  }


  #modalEditarJugador
  #btnCancelarEditarJugador,
  #modalEditarJugador
  #btnGuardarEditarJugador {
    min-height: 52px;
    padding: 0 11px;
    font-size: 13px;
  }
}


/* =========================================================
   MODAL EQUIPO - ESCUDO
   ========================================================= */

.modal-equipo-card {
  width: min(
    92vw,
    470px
  );
}


.equipo-logo-section {
  margin-top: 4px;

  padding: 16px;

  border:
    1px solid #e2e8f0;

  border-radius: 18px;

  background: #f8fafc;
}


.equipo-logo-title {
  margin-bottom: 14px;
}


.equipo-logo-title strong {
  display: block;

  color: #334155;

  font-size: 13px;
  font-weight: 900;
}


.equipo-logo-title span {
  display: block;

  margin-top: 3px;

  color: #94a3b8;

  font-size: 11px;
}


.equipo-logo-content {
  display: flex;
  align-items: center;

  gap: 14px;
}


.equipo-logo-preview {
  width: 82px;
  height: 82px;

  min-width: 82px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 20px;

  background: #ffffff;

  border:
    1px solid #dbe4f0;
}


.equipo-logo-preview img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 5px;

  box-sizing: border-box;
}


.equipo-logo-placeholder {
  font-size: 34px;
}


.equipo-logo-controls {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}


.equipo-logo-select,
.equipo-logo-remove {
  min-height: 35px;

  padding: 8px 11px;

  border-radius: 11px;

  font-family: inherit;

  font-size: 11px;
  font-weight: 850;

  cursor: pointer;
}


.equipo-logo-select {
  color: #2563eb;

  background: #eff6ff;

  border:
    1px solid #bfdbfe;
}


.equipo-logo-remove {
  color: #dc2626;

  background: #fff1f2;

  border:
    1px solid #fecdd3;
}


.equipo-logo-file {
  width: 100%;

  overflow: hidden;

  color: #64748b;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


@media (max-width: 480px) {

  .equipo-logo-section {
    padding: 13px;
  }


  .equipo-logo-content {
    align-items: flex-start;

    gap: 11px;
  }


  .equipo-logo-preview {
    width: 70px;
    height: 70px;

    min-width: 70px;

    border-radius: 17px;
  }


  .equipo-logo-placeholder {
    font-size: 29px;
  }


  .equipo-logo-select,
  .equipo-logo-remove {
    min-height: 33px;

    padding: 7px 9px;

    font-size: 10px;
  }
}


/* =========================================================
   MODAL EQUIPO - COMPACTO + SCROLL
   ========================================================= */

#modalEquipo {
  align-items: flex-start;

  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom));

  overflow-y: auto;
}


#modalEquipo .modal-equipo-card {
  width: min(92vw, 470px);

  max-height:
    calc(100dvh - 24px);

  margin: auto;

  padding: 22px;

  overflow-y: auto;
  overscroll-behavior: contain;

  scrollbar-width: thin;
}


/* =========================
   HEADER MÁS COMPACTO
   ========================= */

#modalEquipo .modal-header {
  margin-bottom: 18px;
  padding-bottom: 16px;

  gap: 12px;
}


#modalEquipo .modal-icon {
  width: 54px;
  height: 54px;
  min-width: 54px;

  border-radius: 17px;
}


#modalEquipo .modal-header h2 {
  font-size: 24px;
  line-height: 1.1;
}


#modalEquipo .modal-header p {
  margin-top: 5px;

  font-size: 13px;
  line-height: 1.35;
}


/* =========================
   CAMPOS MÁS PEQUEÑOS
   ========================= */

#modalEquipo .form-group {
  margin-bottom: 14px;
}


#modalEquipo .form-group label {
  margin-bottom: 6px;

  font-size: 12px;
  font-weight: 850;
}


#modalEquipo .form-group input {
  width: 100%;
  height: 46px;

  box-sizing: border-box;

  padding: 0 14px;

  border-radius: 13px;

  font-size: 13px;
}


/* =========================
   ESCUDO MÁS COMPACTO
   ========================= */

#modalEquipo .equipo-logo-section {
  margin-top: 2px;

  padding: 13px;

  border-radius: 16px;
}


#modalEquipo .equipo-logo-title {
  margin-bottom: 10px;
}


#modalEquipo .equipo-logo-preview {
  width: 66px;
  height: 66px;
  min-width: 66px;

  border-radius: 16px;
}


#modalEquipo .equipo-logo-placeholder {
  font-size: 27px;
}


#modalEquipo .equipo-logo-content {
  gap: 10px;
}


#modalEquipo .equipo-logo-select,
#modalEquipo .equipo-logo-remove {
  min-height: 32px;

  padding: 6px 9px;

  border-radius: 10px;

  font-size: 10px;
}


/* =========================
   BOTONES
   ========================= */

#modalEquipo .modal-actions {
  position: sticky;

  bottom: -22px;

  margin-top: 16px;
  margin-left: -22px;
  margin-right: -22px;
  margin-bottom: -22px;

  padding: 14px 22px 22px;

  display: grid;
  grid-template-columns: 1fr 1.1fr;

  gap: 10px;

  background:
    linear-gradient(
      to top,
      #ffffff 78%,
      rgba(255,255,255,0.92)
    );
}


#modalEquipo .modal-actions button {
  min-height: 48px;

  padding: 0 14px;

  border-radius: 14px;

  white-space: nowrap;

  font-size: 13px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

  #modalEquipo {
    padding: 8px;
  }


  #modalEquipo .modal-equipo-card {
    width: 100%;

    max-height:
      calc(100dvh - 16px);

    padding: 18px;
  }


  #modalEquipo .modal-header {
    margin-bottom: 14px;
    padding-bottom: 13px;
  }


  #modalEquipo .modal-header h2 {
    font-size: 22px;
  }


  #modalEquipo .form-group {
    margin-bottom: 11px;
  }


  #modalEquipo .form-group input {
    height: 44px;

    font-size: 13px;
  }


  #modalEquipo .equipo-logo-section {
    padding: 11px;
  }


  #modalEquipo .equipo-logo-preview {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }


  #modalEquipo .modal-actions {
    bottom: -18px;

    margin-left: -18px;
    margin-right: -18px;
    margin-bottom: -18px;

    padding:
      12px 18px
      calc(
        18px +
        env(safe-area-inset-bottom)
      );
  }


  #modalEquipo .modal-actions button {
    min-height: 46px;
  }
}

/* =========================================================
   EQUIPO - TIPO DE IDENTIDAD
   ========================================================= */

#modalEquipo
.equipo-tipo-selector {
  display: grid;
  grid-template-columns:
    1fr 1fr;

  gap: 8px;
}


#modalEquipo
.equipo-tipo-opcion {
  cursor: pointer;
}


#modalEquipo
.equipo-tipo-opcion input {
  position: absolute;

  opacity: 0;
  pointer-events: none;
}


#modalEquipo
.equipo-tipo-opcion span {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 10px;

  border:
    1px solid #dbe4f0;

  border-radius: 13px;

  background: #f8fafc;

  color: #64748b;

  font-size: 12px;
  font-weight: 850;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}


#modalEquipo
.equipo-tipo-opcion
input:checked + span {
  color: #2563eb;

  background: #eff6ff;

  border-color: #93c5fd;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.08);
}


/* =========================================================
   PAÍS
   ========================================================= */

#modalEquipo
.equipo-pais-control {
  display: grid;

  grid-template-columns:
    48px minmax(0, 1fr);

  gap: 9px;

  align-items: center;
}


#modalEquipo
.equipo-pais-bandera {
  height: 44px;

  display: grid;
  place-items: center;

  border:
    1px solid #dbe4f0;

  border-radius: 13px;

  background: #f8fafc;

  font-size: 24px;
}


#modalEquipo
#paisEquipo {
  width: 100%;
  height: 44px;

  box-sizing: border-box;

  padding:
    0 38px
    0 13px;

  border:
    1px solid #dbe4f0;

  border-radius: 13px;

  outline: none;

  background: #ffffff;

  color: #0f172a;

  font-family: inherit;
  font-size: 13px;
}


#modalEquipo
#paisEquipo:focus {
  border-color: #3b82f6;

  box-shadow:
    0 0 0 3px
    rgba(59, 130, 246, 0.10);
}


/*
 * Fundamental porque algunos estilos
 * globales pueden sobreescribir [hidden].
 */
#modalEquipo [hidden] {
  display: none !important;
}


#modalEquipo
.equipo-pais-bandera {
  overflow: hidden;

  padding: 6px;
}


#modalEquipo
.equipo-pais-bandera img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 8px;
}


/*====================================
CONFIGURACION - CATEGORIA ACTIVA
====================================*/

.config-categoria-bar{
    width:calc(100% - 20px);
    max-width:460px;

    margin:8px auto 12px;

    padding:12px 14px;

    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    background:#fff;

    border:1px solid #e5eaf3;
    border-radius:18px;

    box-shadow:
        0 8px 20px
        rgba(15,23,42,.05);
}


.config-categoria-info{
    display:flex;
    flex-direction:column;
    gap:2px;

    min-width:0;
}


.config-categoria-eyebrow{
    color:#64748b;

    font-size:10px;
    font-weight:800;
}


.config-categoria-info strong{
    color:#0f172a;

    font-size:16px;
    font-weight:900;

    line-height:1.2;
}


.config-categoria-control{
    width:145px;
    flex-shrink:0;
}


.config-categoria-control select{
    width:100%;
    height:38px;

    margin:0;

    padding:0 10px;

    border:1px solid #d7dfeb;
    border-radius:11px;

    background:#f8fafc;

    color:#0f172a;

    font-size:13px;
    font-weight:800;

    outline:none;
}


.config-categoria-control select:focus{
    border-color:#2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.10);

    background:#fff;
}

/*====================================
AJUSTE FINAL DE ESPACIOS CONFIGURACION
====================================*/

.settings-page{
    gap:12px;
}

.settings-page .settings-hero{
    margin-bottom:0;
}

.settings-page .config-categoria-bar{
    margin-top:0;
    margin-bottom:0;
}

.settings-page .settings-grid{
    margin-top:0;
    padding-top:0;
}

/*====================================
TABLA - SELECTOR DE CATEGORIA
====================================*/

.tabla-page .tabla-categoria-bar{
    width:100%;
    margin:2px 0 6px;
    padding:12px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    box-sizing:border-box;

    background:#fff;

    border:1px solid #e5eaf3;
    border-radius:18px;

    box-shadow:
        0 8px 20px
        rgba(15,23,42,.05);
}


.tabla-page .tabla-categoria-info{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:2px;
}


.tabla-page .tabla-categoria-info span{
    color:#64748b;

    font-size:10px;
    font-weight:800;

    line-height:1.2;
}


.tabla-page .tabla-categoria-info strong{
    color:#0f172a;

    font-size:16px;
    font-weight:900;

    line-height:1.2;
}


.tabla-page .tabla-categoria-control{
    width:150px;
    flex-shrink:0;
}


.tabla-page .tabla-categoria-control select{
    width:100%;
    height:40px;

    margin:0;
    padding:0 12px;

    box-sizing:border-box;

    border:1px solid #d7dfeb;
    border-radius:12px;

    background:#f8fafc;

    color:#0f172a;

    font-size:13px;
    font-weight:800;

    outline:none;

    cursor:pointer;
}


.tabla-page .tabla-categoria-control select:focus{
    border-color:#2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.12);
}

/*====================================
FIXTURE - CATEGORIA
====================================*/

.fixture-page .fixture-categoria-bar{
    width:100%;
    margin:2px 0 2px;
    padding:12px 14px;

    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    background:#fff;

    border:1px solid #e5eaf3;
    border-radius:18px;

    box-shadow:
        0 8px 20px
        rgba(15,23,42,.05);
}


.fixture-page .fixture-categoria-info{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:2px;
}


.fixture-page .fixture-categoria-info span{
    color:#64748b;

    font-size:10px;
    font-weight:800;

    line-height:1.2;
}


.fixture-page .fixture-categoria-info strong{
    color:#0f172a;

    font-size:16px;
    font-weight:900;

    line-height:1.2;
}


.fixture-page .fixture-categoria-control{
    width:150px;
    flex-shrink:0;
}


.fixture-page .fixture-categoria-control select{
    width:100%;
    height:40px;

    margin:0;
    padding:0 12px;

    box-sizing:border-box;

    border:1px solid #d7dfeb;
    border-radius:12px;

    background:#f8fafc;

    color:#0f172a;

    font-size:13px;
    font-weight:800;

    outline:none;

    cursor:pointer;
}


.fixture-page .fixture-categoria-control select:focus{
    border-color:#2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.12);
}


/*====================================
FIXTURE - BOTON GENERAR
====================================*/

.fixture-page .btn-generar-fixture{
    width:100%;
    min-height:46px;

    margin:0 0 2px;
    padding:11px 18px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    box-sizing:border-box;

    border:0;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3157d5
        );

    color:#fff;

    font-size:14px;
    font-weight:900;

    box-shadow:
        0 8px 18px
        rgba(37,99,235,.18);

    cursor:pointer;
}


.fixture-page .btn-generar-fixture:active{
    transform:scale(.98);
}

/*====================================
FIXTURE - ESTADO VACIO
====================================*/

.fixture-page .fixture-empty{
    width:100%;
    margin-top:4px;
    padding:24px 18px;

    box-sizing:border-box;

    display:flex;
    align-items:center;
    gap:14px;

    background:#fff;

    border:1px solid #e5eaf3;
    border-radius:22px;

    box-shadow:
        0 10px 24px
        rgba(15,23,42,.05);
}


.fixture-page .fixture-empty-icon{
    width:48px;
    height:48px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eff6ff;

    border-radius:15px;

    font-size:23px;
}


.fixture-page .fixture-empty-content{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:4px;
}


.fixture-page .fixture-empty-content strong{
    color:#0f172a;

    font-size:16px;
    font-weight:900;
}


.fixture-page .fixture-empty-content p{
    margin:0;

    color:#64748b;

    font-size:12px;
    font-weight:600;
    line-height:1.4;
}

/*
 * =========================================
 * ACCIONES SECUNDARIAS DEL PARTIDO
 * =========================================
 */

.match-actions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 8px;
  align-items: stretch;
}

.match-pro-footer .match-actions .btn-live {
  width: 100%;
}

.match-pro-footer .btn-more-actions {
  width: 46px;
  min-width: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
  color: #475569;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.match-pro-footer .btn-more-actions:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.match-pro-footer .btn-more-actions:active {
  transform: scale(.96);
}


/*
 * =========================================
 * MENU ADMINISTRATIVO DEL PARTIDO
 * =========================================
 */

.match-admin-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;

  min-width: 190px;

  padding: 6px;

  background: #fff;

  border: 1px solid var(--border);
  border-radius: 14px;

  box-shadow:
    0 18px 40px rgba(15, 23, 42, .16);

  opacity: 0;
  visibility: hidden;
  transform: translateY(5px) scale(.98);

  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;
}

.match-admin-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.match-pro-footer .match-admin-menu button {
  width: 100%;

  padding: 11px 12px;

  border: 0;
  border-radius: 10px;

  background: transparent;
  color: #334155;

  text-align: left;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;
}

.match-pro-footer .match-admin-menu button:hover {
  background: #f8fafc;
}

.match-pro-footer .match-admin-menu .action-wo {
  color: #b45309;
}


/* =========================================================
   FIXTURE POR FASES - AJUSTE VISUAL COMPACTO
   ========================================================= */

.fixture-list {
  display: grid;
  gap: 28px;
  padding-bottom: 90px;
}


/* =========================
   FASE
   ========================= */

.fixture-phase {
  display: grid;
  gap: 14px;
}

.fixture-phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;

  background: #ffffff;

  border: 1px solid var(--border);
  border-radius: 20px;

  box-shadow: var(--shadow-soft);
}

.fixture-phase.is-finished .fixture-phase-header {
  border-left: 5px solid #16a34a;
}

.fixture-phase.is-active .fixture-phase-header {
  border-left: 5px solid #2563eb;
}

.fixture-phase-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.fixture-phase-icon {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  font-size: 15px;
  font-weight: 1000;

  background: #eef2ff;
  color: #2563eb;
}

.fixture-phase.is-finished .fixture-phase-icon {
  background: #dcfce7;
  color: #15803d;
}

.fixture-phase-title small {
  display: block;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .08em;

  color: var(--muted);
}

.fixture-phase-title h2 {
  margin: 2px 0 0;

  font-size: 20px;
  line-height: 1.05;
}

.fixture-phase-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;

  text-align: right;
}

.fixture-phase-status {
  display: inline-flex;
  align-items: center;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 1000;

  background: #f1f5f9;
  color: #475569;
}

.fixture-phase.is-active .fixture-phase-status {
  background: #dbeafe;
  color: #1d4ed8;
}

.fixture-phase.is-finished .fixture-phase-status {
  background: #dcfce7;
  color: #15803d;
}

.fixture-phase-meta small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.fixture-phase-rounds {
  display: grid;
  gap: 18px;
}


/* =========================
   RONDAS
   ========================= */

.round-block {
  display: grid;
  gap: 9px;
}

.round-header {
  padding: 9px 12px;

  border-radius: 15px;

  background: #f8fafc;

  box-shadow: none;
}

.round-header h3 {
  margin: 0;

  font-size: 14px;
  line-height: 1.1;
}

.round-header p {
  margin-top: 2px;

  font-size: 11px;
}

.round-matches {
  display: grid;
  gap: 9px;
}


/* =========================
   TARJETA DE PARTIDO
   ========================= */

.match-card-pro {
  padding: 12px 14px;

  border-radius: 19px;

  box-shadow:
    0 6px 16px rgba(15, 23, 42, .06);
}

.match-pro-header small {
  font-size: 9px;
}

.match-pro-header strong {
  margin-top: 2px;
  font-size: 16px;
}

.match-status {
  padding: 5px 8px;
  font-size: 9px;
}


/* cuerpo central */

.match-pro-body {
  gap: 8px;
  margin: 10px 0;
}

.match-flag {
  width: 48px;
  height: 48px;

  margin: 0 auto 5px;

  font-size: 25px;
}

.match-flag .team-flag-img,
.match-pro-body .team-flag-img {
  width: 38px;
  height: 38px;

  border-width: 2px;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, .12);
}

.match-team h3 {
  font-size: 12px;
  line-height: 1.15;
}

.match-vs {
  font-size: 13px;
}


/* =========================
   PIE / BOTONES / RESULTADO
   ========================= */

.match-pro-footer button {
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 12px;
}

.match-result-final {
  padding: 9px 12px !important;
  border-radius: 13px !important;
}

.match-result-final strong {
  font-size: 20px;
  line-height: 1;
}

.match-result-final span {
  margin-top: 3px;
  font-size: 10px;
}


/* =========================
   MÓVIL
   ========================= */

@media (max-width: 600px) {

  .fixture-list {
    gap: 24px;
  }

  .fixture-phase-header {
    padding: 12px 13px;
    border-radius: 17px;
  }

  .fixture-phase-title h2 {
    font-size: 18px;
  }

  .fixture-phase-icon {
    width: 31px;
    height: 31px;
  }

  .fixture-phase-rounds {
    gap: 15px;
  }

  .round-block {
    gap: 8px;
  }

  .match-card-pro {
    padding: 11px 12px;
    border-radius: 18px;
  }

  .match-pro-body {
    margin: 8px 0;
  }

  .match-flag {
    width: 46px;
    height: 46px;
  }

  .match-flag .team-flag-img,
  .match-pro-body .team-flag-img {
    width: 36px;
    height: 36px;
  }

}


/* =========================================
   TABLA - POSICIONES FINALES
========================================= */

.tabla-finales {
  margin: 16px 0 20px;
  padding: 16px;
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(250, 204, 21, .18),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #0f1f55,
      #08142f
    );
  box-shadow:
    0 18px 38px rgba(15, 31, 85, .18);
  overflow: hidden;
}

.tabla-finales-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tabla-finales-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tabla-finales-head span {
  color: #facc15;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.tabla-finales-head strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.1;
}

.tabla-finales-head small {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .15);
  border: 1px solid rgba(74, 222, 128, .22);
  color: #86efac;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .5px;
}


/* CAMPEON */

.tabla-campeon {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      #fff9db,
      #fff
    );
  border: 1px solid rgba(250, 204, 21, .55);
}

.tabla-campeon-copa {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fef3c7;
  font-size: 22px;
}

.tabla-campeon-identidad {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.tabla-campeon-identidad > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tabla-campeon-identidad span {
  color: #b7791f;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .8px;
}

.tabla-campeon-identidad strong {
  overflow: hidden;
  color: #172554;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabla-campeon-posicion {
  color: #eab308;
  font-size: 28px;
  font-weight: 1000;
}


/* RESTO DEL PODIO */

.tabla-finales-resto {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.tabla-final-item {
  display: grid;
  grid-template-columns: 38px 38px 1fr;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
}

.tabla-final-rank {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 16px;
  font-weight: 1000;
}

.tabla-final-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}

.tabla-final-avatar img,
.tabla-final-avatar .team-flag-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.tabla-final-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tabla-final-info span {
  color: #93c5fd;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .55px;
}

.tabla-final-info strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* MOVIL */

@media (max-width: 430px) {

  .tabla-finales {
    padding: 14px;
    border-radius: 22px;
  }

  .tabla-finales-head strong {
    font-size: 16px;
  }

  .tabla-campeon {
    grid-template-columns: 40px 1fr auto;
    padding: 12px;
  }

  .tabla-campeon-copa {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .tabla-campeon-identidad strong {
    font-size: 14px;
  }

  .tabla-campeon-posicion {
    font-size: 24px;
  }
}





/* TITULO DEFINITIVO EN LIGAS SIN PLAYOFF */

.tabla-titulo-final {
  display: block;
  margin-top: 3px;
  color: #b7791f;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .6px;
}


/* =========================================================
   TABLA - AJUSTE FINAL DE ESPACIADO Y CONTEXTO
========================================================= */

/*
 * Si no existe bloque independiente de posiciones
 * finales, eliminamos completamente su espacio.
 */
#tablaPosicionesFinales:empty {
  display: none;
}


/*
 * Reducimos el espacio general de la pantalla.
 */
.tabla-page {
  gap: 12px;
}


/* =========================================================
   ENCABEZADO DE CLASIFICACION
========================================================= */

.tabla-contexto-clasificacion {
  position: relative;

  margin: 4px 0 2px;
  padding: 12px 14px;

  display: flex;
  flex-direction: column;
  gap: 2px;

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, .08),
      rgba(255, 255, 255, .96)
    );

  border:
    1px solid
    rgba(37, 99, 235, .10);
}


.tabla-contexto-clasificacion::before {
  content: "";

  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;

  width: 4px;

  border-radius:
    0 8px 8px 0;

  background:
    #2563eb;
}


.tabla-contexto-clasificacion span {
  margin-left: 5px;

  color: #2563eb;

  font-size: 8px;
  line-height: 1;

  font-weight: 1000;
  letter-spacing: .75px;
}


.tabla-contexto-clasificacion strong {
  margin-left: 5px;

  color: #0f172a;

  font-size: 15px;
  line-height: 1.2;

  font-weight: 950;
}


.tabla-contexto-clasificacion small {
  margin-left: 5px;
  margin-top: 1px;

  color: #64748b;

  font-size: 9px;
  line-height: 1.25;

  font-weight: 700;
}



/* =========================================================
   BLOQUE RESULTADO PLAYOFF
========================================================= */

.tabla-finales {
  margin:
    4px 0 2px;
}


/*
 * El bloque siguiente ya tiene su propio
 * encabezado, así que no necesitamos
 * tanta separación.
 */
#tablaPosicionesFinales + .tabla-contexto-clasificacion {
  margin-top:
    2px;
}


/* =========================================================
   TARJETAS
========================================================= */

.tabla-list {
  gap: 10px;
}


/*
 * Etiqueta CAMPEON / SUBCAMPEON / etc.
 */
.tabla-titulo-final {
  width:
    max-content;

  margin-top:
    4px;

  padding:
    3px 7px;

  border-radius:
    999px;

  background:
    #fff7d6;

  color:
    #b7791f;

  font-size:
    7px;

  line-height:
    1;

  font-weight:
    1000;

  letter-spacing:
    .55px;
}


/* =========================================================
   MOVIL
========================================================= */

@media (max-width: 430px) {

  .tabla-page {
    gap:
      10px;
  }


  .tabla-contexto-clasificacion {
    margin:
      2px 0 0;

    padding:
      11px 13px;

    border-radius:
      15px;
  }


  .tabla-contexto-clasificacion strong {
    font-size:
      14px;
  }


  .tabla-contexto-clasificacion small {
    font-size:
      8px;
  }


  .tabla-finales {
    margin:
      2px 0 0;
  }


  .tabla-list {
    gap:
      9px;
  }
}



/* =========================================
   TABLA - SUBTITULO PLAYOFF
========================================= */

.tabla-subtitulo-playoff {
  margin: 4px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tabla-subtitulo-playoff strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.tabla-subtitulo-playoff span {
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
}


/* =========================================
   RESULTADO FINAL COMPACTO
========================================= */

.tabla-finales-compacta {
  padding: 14px;
  border-radius: 22px;
}

.tabla-final-campeon-compacto {
  display: grid;
  grid-template-columns: 38px 36px 1fr auto;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      #fff8dc,
      #fff
    );

  border:
    1px solid rgba(250, 204, 21, .55);
}

.tabla-final-copa {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    #fef3c7;

  font-size: 18px;
}

.tabla-final-campeon-texto {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.tabla-final-campeon-texto span {
  color: #b7791f;

  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .6px;
}

.tabla-final-campeon-texto strong {
  overflow: hidden;

  color: #172554;

  font-size: 13px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.tabla-final-campeon-compacto > b {
  color: #eab308;

  font-size: 22px;
  font-weight: 1000;
}


/* 2°, 3° Y 4° EN UNA SOLA FILA */

.tabla-final-podio-compacto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 7px;

  margin-top: 8px;
}

.tabla-final-mini {
  min-width: 0;

  padding: 8px 5px;

  display: grid;
  justify-items: center;
  gap: 4px;

  border-radius: 14px;

  background:
    rgba(255, 255, 255, .08);

  border:
    1px solid
    rgba(255, 255, 255, .08);
}

.tabla-final-mini > span {
  color: #fff;

  font-size: 14px;
  font-weight: 1000;
}

.tabla-final-mini > div {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #fff;
  overflow: hidden;
}

.tabla-final-mini img,
.tabla-final-mini .team-flag-img {
  width: 24px;
  height: 24px;

  border-radius: 50%;
  object-fit: cover;
}

.tabla-final-mini strong {
  width: 100%;

  overflow: hidden;

  color: #fff;

  font-size: 10px;
  font-weight: 900;

  text-align: center;

  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================
   CLASIFICACION PREVIA A PLAYOFFS
========================================= */

.tabla-subtitulo-playoff {
  position: relative;

  margin: 7px 0 2px;
  padding: 12px 14px 12px 52px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;

  min-height: 58px;

  background: #ffffff;

  border:
    1px solid
    #dbe5f5;

  border-radius: 17px;

  box-shadow:
    0 8px 20px rgba(15, 23, 42, .06);

  overflow: hidden;
}


/* BARRA LATERAL */

.tabla-subtitulo-playoff::after {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background:
    linear-gradient(
      180deg,
      #2563eb,
      #3b82f6
    );
}


/* ICONO */

.tabla-subtitulo-playoff::before {
  content: "🏆";

  position: absolute;

  left: 13px;
  top: 50%;

  transform:
    translateY(-50%);

  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    #eff6ff;

  border:
    1px solid
    #dbeafe;

  font-size: 14px;
}


/* TITULO */

.tabla-subtitulo-playoff strong {
  color: #0b163d;

  font-size: 14px;
  line-height: 1.15;

  font-weight: 1000;

  letter-spacing: -.15px;
}


/* DESCRIPCION */

.tabla-subtitulo-playoff span {
  color: #52627a;

  font-size: 9px;
  line-height: 1.3;

  font-weight: 750;
}



/* =========================================
   TITULOS DE POSICION FINAL
========================================= */

.tabla-titulo-final {
  display: inline-flex;
  align-items: center;

  width: max-content;

  margin-top: 4px;
  padding: 3px 7px;

  border-radius: 999px;

  font-size: 7px;
  line-height: 1;

  font-weight: 1000;
  letter-spacing: .55px;

  text-transform: uppercase;
}


/* CAMPEON */

.tabla-titulo-final.posicion-final-1 {
  color: #9a6700;
  background: #fff2b8;
}


/* SUBCAMPEON */

.tabla-titulo-final.posicion-final-2 {
  color: #475569;
  background: #e8edf4;
}


/* TERCER PUESTO */

.tabla-titulo-final.posicion-final-3 {
  color: #9a4e19;
  background: #ffead8;
}


/* CUARTO PUESTO */

.tabla-titulo-final.posicion-final-4 {
  color: #475569;
  background: #eef2f7;
}



/* =========================================
   ELIMINACION DIRECTA - EQUIPOS
========================================= */

.tabla-card-eliminacion {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr);

  align-items: center;

  gap: 16px;

  min-height: 82px;

  padding: 14px 18px;

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 100%
    );

  border:
    1px solid
    rgba(148, 163, 184, .22);

  box-shadow:
    0 8px 22px
    rgba(15, 23, 42, .06);

  overflow: hidden;
}


/* Franja deportiva lateral */

.tabla-card-eliminacion::before {
  content: "";

  position: absolute;

  left: 0;
  top: 17px;
  bottom: 17px;

  width: 4px;

  border-radius:
    0 999px 999px 0;

  background:
    linear-gradient(
      180deg,
      #2563eb,
      #60a5fa
    );
}


/* En eliminación no existe columna
   de posición ni de puntos */

.tabla-card-eliminacion .tabla-main {
  min-width: 0;
}


.tabla-card-eliminacion .tabla-team-head {
  display: flex;

  align-items: center;

  gap: 14px;

  min-width: 0;
}


/* Logo */

.tabla-card-eliminacion .tabla-flag {
  width: 54px;
  height: 54px;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f1f5f9
    );

  border:
    1px solid
    rgba(148, 163, 184, .18);

  box-shadow:
    0 6px 16px
    rgba(15, 23, 42, .08);

  flex-shrink: 0;
}


.tabla-card-eliminacion .tabla-flag img,
.tabla-card-eliminacion .tabla-flag .team-flag-img {
  width: 40px;
  height: 40px;

  object-fit: cover;

  border-radius: 50%;
}


/* Información */

.tabla-equipo-info {
  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 3px;
}


.tabla-equipo-kicker {
  color: #2563eb;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1.3px;
}


.tabla-card-eliminacion
.tabla-equipo-info strong {
  display: block;

  color: #0f172a;

  font-size: 17px;

  font-weight: 900;

  line-height: 1.15;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* Móvil */

@media (max-width: 430px) {

  .tabla-card-eliminacion {
  grid-template-columns:
    minmax(0, 1fr);

    min-height: 76px;

    gap: 12px;

    padding:
      12px 15px;
  }


  .tabla-card-eliminacion .tabla-flag {
    width: 48px;
    height: 48px;

    border-radius: 16px;
  }


  .tabla-card-eliminacion .tabla-flag img,
  .tabla-card-eliminacion
  .tabla-flag .team-flag-img {
    width: 36px;
    height: 36px;
  }


  .tabla-card-eliminacion
  .tabla-equipo-info strong {
    font-size: 16px;
  }

}



/* =========================================
   ESTADO - ELIMINACION DIRECTA
========================================= */

.tabla-estado-eliminacion {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-top: 5px;

  padding: 4px 9px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .7px;

  line-height: 1;
}


.tabla-estado-eliminacion.is-clasificado {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}


.tabla-estado-eliminacion.is-eliminado {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}


.tabla-estado-eliminacion.is-competencia {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
/* =========================================================
   DASHBOARD ADMIN - MODO CLARO
   Más color, más jerarquía visual
========================================================= */

body.light-theme .admin-sport-dashboard .sport-hero-card,
body.tema-claro .admin-sport-dashboard .sport-hero-card,
html[data-theme="light"] .admin-sport-dashboard .sport-hero-card {
  background:
    radial-gradient(circle at top right, rgba(78, 116, 255, 0.20) 0, rgba(78, 116, 255, 0.20) 18%, transparent 19%),
    radial-gradient(circle at bottom center, rgba(99, 102, 241, 0.16) 0, rgba(99, 102, 241, 0.16) 16%, transparent 17%),
    linear-gradient(135deg, #355df4 0%, #1d2f7c 100%);
  color: #ffffff;
  border: 1px solid rgba(49, 84, 214, 0.35);
  box-shadow: 0 18px 40px rgba(41, 72, 184, 0.18);
}

body.light-theme .admin-sport-dashboard .sport-hero-card *,
body.tema-claro .admin-sport-dashboard .sport-hero-card *,
html[data-theme="light"] .admin-sport-dashboard .sport-hero-card * {
  color: inherit;
}

body.light-theme .admin-sport-dashboard .sport-hero-card .hero-chip,
body.light-theme .admin-sport-dashboard .sport-hero-card .hero-status,
body.tema-claro .admin-sport-dashboard .sport-hero-card .hero-chip,
body.tema-claro .admin-sport-dashboard .sport-hero-card .hero-status,
html[data-theme="light"] .admin-sport-dashboard .sport-hero-card .hero-chip,
html[data-theme="light"] .admin-sport-dashboard .sport-hero-card .hero-status {
  background: #d8f6e2;
  color: #0f8a4b !important;
  border: 1px solid #bdeccd;
  font-weight: 900;
}

body.light-theme .admin-sport-dashboard .sport-hero-card .hero-mini-kpi,
body.tema-claro .admin-sport-dashboard .sport-hero-card .hero-mini-kpi,
html[data-theme="light"] .admin-sport-dashboard .sport-hero-card .hero-mini-kpi {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

body.light-theme .admin-sport-dashboard .sport-hero-card .hero-mini-kpi strong,
body.light-theme .admin-sport-dashboard .sport-hero-card .hero-mini-kpi span,
body.tema-claro .admin-sport-dashboard .sport-hero-card .hero-mini-kpi strong,
body.tema-claro .admin-sport-dashboard .sport-hero-card .hero-mini-kpi span,
html[data-theme="light"] .admin-sport-dashboard .sport-hero-card .hero-mini-kpi strong,
html[data-theme="light"] .admin-sport-dashboard .sport-hero-card .hero-mini-kpi span {
  color: #ffffff !important;
}

body.light-theme .admin-sport-dashboard .next-match-card,
body.tema-claro .admin-sport-dashboard .next-match-card,
html[data-theme="light"] .admin-sport-dashboard .next-match-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  border: 1px solid #cfe0ff;
  box-shadow: 0 14px 30px rgba(40, 70, 170, 0.10);
  position: relative;
  overflow: hidden;
}

body.light-theme .admin-sport-dashboard .next-match-card::before,
body.tema-claro .admin-sport-dashboard .next-match-card::before,
html[data-theme="light"] .admin-sport-dashboard .next-match-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #2f6bff 0%, #00c0ff 100%);
}

body.light-theme .admin-sport-dashboard .next-match-badge,
body.tema-claro .admin-sport-dashboard .next-match-badge,
html[data-theme="light"] .admin-sport-dashboard .next-match-badge {
  background: #e8f1ff;
  color: #2454e6;
  border: 1px solid #cfe0ff;
}

body.light-theme .admin-sport-dashboard .categories-card,
body.tema-claro .admin-sport-dashboard .categories-card,
html[data-theme="light"] .admin-sport-dashboard .categories-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe7ff;
  box-shadow: 0 14px 30px rgba(33, 64, 165, 0.08);
}

body.light-theme .admin-sport-dashboard .category-highlight,
body.tema-claro .admin-sport-dashboard .category-highlight,
html[data-theme="light"] .admin-sport-dashboard .category-highlight {
  background: linear-gradient(180deg, #fafdff 0%, #f2f7ff 100%);
  border: 1px solid #bcd3ff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
}

body.light-theme .admin-sport-dashboard .category-status,
body.tema-claro .admin-sport-dashboard .category-status,
html[data-theme="light"] .admin-sport-dashboard .category-status {
  background: #dcfce7;
  color: #0f8a4b;
  border: 1px solid #c2f0d2;
}

body.light-theme .admin-sport-dashboard .category-actions .btn-soft,
body.tema-claro .admin-sport-dashboard .category-actions .btn-soft,
html[data-theme="light"] .admin-sport-dashboard .category-actions .btn-soft {
  background: #eef4ff;
  color: #2d5cff;
  border: 1px solid #d5e3ff;
}

body.light-theme .admin-sport-dashboard .podium-card,
body.tema-claro .admin-sport-dashboard .podium-card,
html[data-theme="light"] .admin-sport-dashboard .podium-card {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%);
  border: 1px solid #e2e8f5;
  box-shadow: 0 14px 26px rgba(30, 41, 59, 0.06);
}

body.light-theme .admin-sport-dashboard .podium-item,
body.tema-claro .admin-sport-dashboard .podium-item,
html[data-theme="light"] .admin-sport-dashboard .podium-item {
  background: #ffffff;
  border: 1px solid #e6edf8;
}

body.light-theme .admin-sport-dashboard .podium-item.is-first,
body.tema-claro .admin-sport-dashboard .podium-item.is-first,
html[data-theme="light"] .admin-sport-dashboard .podium-item.is-first {
  background: linear-gradient(180deg, #fffdf5 0%, #fff8df 100%);
  border: 1px solid #f0ca4d;
  box-shadow: 0 10px 22px rgba(240, 202, 77, 0.18);
}

body.light-theme .admin-sport-dashboard .recent-results-card,
body.tema-claro .admin-sport-dashboard .recent-results-card,
html[data-theme="light"] .admin-sport-dashboard .recent-results-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe5f4;
  box-shadow: 0 12px 24px rgba(33, 56, 115, 0.06);
}

body.light-theme .admin-sport-dashboard .recent-result-item,
body.tema-claro .admin-sport-dashboard .recent-result-item,
html[data-theme="light"] .admin-sport-dashboard .recent-result-item {
  background: linear-gradient(180deg, #f9fbff 0%, #f2f6ff 100%);
  border: 1px solid #d9e4f7;
}

body.light-theme .admin-sport-dashboard .ds-card h2,
body.light-theme .admin-sport-dashboard .ds-card h3,
body.light-theme .admin-sport-dashboard .ds-card strong,
body.tema-claro .admin-sport-dashboard .ds-card h2,
body.tema-claro .admin-sport-dashboard .ds-card h3,
body.tema-claro .admin-sport-dashboard .ds-card strong,
html[data-theme="light"] .admin-sport-dashboard .ds-card h2,
html[data-theme="light"] .admin-sport-dashboard .ds-card h3,
html[data-theme="light"] .admin-sport-dashboard .ds-card strong {
  color: #0f172a;
}

body.light-theme .admin-sport-dashboard .ds-card p,
body.light-theme .admin-sport-dashboard .ds-card small,
body.tema-claro .admin-sport-dashboard .ds-card p,
body.tema-claro .admin-sport-dashboard .ds-card small,
html[data-theme="light"] .admin-sport-dashboard .ds-card p,
html[data-theme="light"] .admin-sport-dashboard .ds-card small {
  color: #51607a;
}


/* =========================================================
   LIGAYA MESA OPERATIVA V2
   ========================================================= */

.mesa-control-v2 {
  --mesa-bg: #f3f7fc;
  --mesa-surface: #ffffff;
  --mesa-surface-2: #f8fbff;
  --mesa-text: #0f172a;
  --mesa-muted: #64748b;
  --mesa-border: #dbe5f0;
  --mesa-primary: #2563eb;
  --mesa-primary-soft: #dbeafe;
  --mesa-live: #ef4444;
  --mesa-live-soft: #fee2e2;
  --mesa-success: #059669;
  --mesa-success-soft: #d1fae5;

  padding:
    clamp(14px, 2.5vw, 28px)
    clamp(14px, 3vw, 32px)
    120px;

  display: grid;
  gap:
    clamp(14px, 2vw, 22px);

  color:
    var(--mesa-text);
}


/* CABECERA */

.mesa-ops-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 330px);

  gap:
    clamp(16px, 3vw, 32px);

  align-items: center;

  padding:
    clamp(20px, 3vw, 34px);

  border:
    1px solid
    var(--mesa-border);

  border-radius:
    clamp(20px, 3vw, 30px);

  background:
    var(--mesa-surface);

  box-shadow:
    0 18px 46px
    rgba(15,23,42,.07);
}

.mesa-ops-copy {
  min-width: 0;
}

.mesa-ops-eyebrow {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 8px;

  color:
    var(--mesa-primary);

  font-size:
    11px;

  font-weight: 950;

  letter-spacing:
    .13em;
}

.mesa-ops-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--mesa-primary);

  box-shadow:
    0 0 0 5px
    color-mix(
      in srgb,
      var(--mesa-primary) 12%,
      transparent
    );
}

.mesa-ops-copy h1 {
  margin: 0;

  color:
    var(--mesa-text);

  font-size:
    clamp(28px, 4vw, 46px);

  line-height: 1;

  font-weight: 1000;

  letter-spacing:
    -.035em;
}

.mesa-ops-copy p {
  max-width: 650px;

  margin:
    10px
    0
    0;

  color:
    var(--mesa-muted);

  font-size:
    clamp(13px, 1.5vw, 16px);

  line-height: 1.45;
}


/* SELECTOR */

.mesa-scope-card {
  display: flex;
  flex-direction: column;

  gap: 7px;

  padding:
    14px;

  border-radius:
    18px;

  background:
    var(--mesa-surface-2);

  border:
    1px solid
    var(--mesa-border);
}

.mesa-scope-card label {
  color:
    var(--mesa-muted);

  font-size: 10px;

  font-weight: 900;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}

.mesa-category-select {
  width: 100%;

  min-height: 44px;

  padding:
    0 12px;

  border-radius:
    12px;

  border:
    1px solid
    var(--mesa-border);

  outline: none;

  color:
    var(--mesa-text);

  background:
    var(--mesa-surface);

  font-size: 14px;

  font-weight: 800;
}

.mesa-category-select:focus {
  border-color:
    var(--mesa-primary);

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--mesa-primary) 14%,
      transparent
    );
}

.mesa-scope-card > span {
  color:
    var(--mesa-muted);

  font-size: 11px;
}

.mesa-scope-card > span strong {
  color:
    var(--mesa-text);
}


/* ALERTA GLOBAL */

.mesa-global-live-alert {
  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    13px 16px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--mesa-live) 26%,
      transparent
    );

  border-radius:
    15px;

  color:
    var(--mesa-text);

  background:
    color-mix(
      in srgb,
      var(--mesa-live) 7%,
      var(--mesa-surface)
    );
}

.mesa-global-live-alert div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

.mesa-global-live-alert span {
  color:
    var(--mesa-muted);

  font-size: 12px;
}

.mesa-live-pulse {
  flex: 0 0 auto;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background:
    var(--mesa-live);

  box-shadow:
    0 0 0 6px
    color-mix(
      in srgb,
      var(--mesa-live) 12%,
      transparent
    );
}


/* KPIS */

.mesa-control-v2 .mesa-kpis-v2 {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    clamp(10px, 1.5vw, 16px);
}

.mesa-control-v2 .mesa-kpi-card {
  position: relative;

  overflow: hidden;

  min-height: 112px;

  padding:
    clamp(14px, 2vw, 20px);

  border-radius:
    20px;

  text-align: left;

  border:
    1px solid
    var(--mesa-border);

  background:
    var(--mesa-surface);

  box-shadow:
    0 10px 30px
    rgba(15,23,42,.055);
}

.mesa-control-v2 .mesa-kpi-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background:
    var(--mesa-primary);
}

.mesa-control-v2
.mesa-kpi-card.is-live::before {
  background:
    var(--mesa-live);
}

.mesa-control-v2
.mesa-kpi-card.is-finished::before {
  background:
    var(--mesa-success);
}

.mesa-control-v2
.mesa-kpi-card.is-category::before {
  background:
    #8b5cf6;
}

.mesa-kpi-label {
  display: block;

  color:
    var(--mesa-muted);

  font-size: 11px;

  font-weight: 900;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

.mesa-control-v2
.mesa-kpi-card strong {
  display: block;

  margin-top: 7px;

  color:
    var(--mesa-text);

  font-size:
    clamp(30px, 4vw, 42px);

  line-height: .95;

  font-weight: 1000;
}

.mesa-control-v2
.mesa-kpi-card small {
  display: block;

  margin-top: 7px;

  color:
    var(--mesa-muted);

  font-size: 11px;
}


/* GRID CENTRAL */

.mesa-operation-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.7fr)
    minmax(260px, .8fr);

  gap:
    clamp(14px, 2vw, 20px);

  align-items: stretch;
}

.mesa-primary-zone {
  min-width: 0;
}


/* PARTIDO */

.mesa-control-v2
.mesa-match-card-v2 {
  height: 100%;

  min-height: 370px;

  padding:
    clamp(18px, 2.5vw, 28px);

  border-radius:
    clamp(20px, 3vw, 28px);

  border:
    1px solid
    var(--mesa-border);

  background:
    var(--mesa-surface);

  color:
    var(--mesa-text);

  box-shadow:
    0 18px 48px
    rgba(15,23,42,.07);

  box-sizing:
    border-box;
}

.mesa-control-v2
.mesa-match-card-v2.is-live {
  box-shadow:
    inset 4px 0 0
      var(--mesa-live),
    0 18px 48px
      rgba(15,23,42,.07);
}

.mesa-control-v2
.mesa-match-card-v2.is-next {
  box-shadow:
    inset 4px 0 0
      var(--mesa-primary),
    0 18px 48px
      rgba(15,23,42,.07);
}

.mesa-match-head-v2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.mesa-match-head-v2 h2 {
  margin:
    9px
    0
    0;

  color:
    var(--mesa-text);

  font-size:
    clamp(21px, 3vw, 31px);

  font-weight: 1000;
}

.mesa-match-badge {
  display: inline-flex;

  padding:
    6px
    9px;

  border-radius:
    999px;

  font-size: 9px;

  font-weight: 1000;

  letter-spacing:
    .10em;
}

.mesa-match-badge.next {
  color:
    var(--mesa-primary);

  background:
    var(--mesa-primary-soft);
}

.mesa-match-badge.live {
  color:
    var(--mesa-live);

  background:
    var(--mesa-live-soft);
}

.mesa-match-identifiers {
  display: flex;
  align-items: center;

  gap: 8px;
}

.mesa-match-identifiers span,
.mesa-match-identifiers strong {
  padding:
    6px
    9px;

  border-radius:
    10px;

  font-size: 10px;

  font-weight: 900;
}

.mesa-match-identifiers span {
  color:
    var(--mesa-muted);

  background:
    var(--mesa-surface-2);

  border:
    1px solid
    var(--mesa-border);
}

.mesa-match-identifiers strong {
  color:
    var(--mesa-primary);

  background:
    var(--mesa-primary-soft);
}


/* FECHA + HORA */

.mesa-schedule {
  display: flex;
  align-items: center;

  width: fit-content;

  gap: 14px;

  margin:
    18px
    0
    10px;

  padding:
    9px
    12px;

  border-radius:
    13px;

  background:
    var(--mesa-surface-2);

  border:
    1px solid
    var(--mesa-border);
}

.mesa-schedule > div {
  display: flex;
  align-items: baseline;

  gap: 6px;
}

.mesa-schedule span {
  color:
    var(--mesa-muted);

  font-size: 8px;

  font-weight: 900;

  letter-spacing:
    .08em;
}

.mesa-schedule strong {
  color:
    var(--mesa-text);

  font-size: 12px;
}

.mesa-schedule i {
  width: 1px;
  height: 18px;

  background:
    var(--mesa-border);
}


/* EQUIPOS */

.mesa-control-v2
.mesa-match-v2 {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    clamp(80px, 10vw, 125px)
    minmax(0, 1fr);

  align-items: center;

  gap:
    clamp(10px, 2vw, 24px);

  padding:
    clamp(12px, 2vh, 20px)
    0;
}

.mesa-control-v2
.mesa-team {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.mesa-control-v2
.mesa-team > span {
  margin-top: 8px;

  color:
    var(--mesa-muted);

  font-size: 9px;

  font-weight: 900;

  letter-spacing:
    .10em;
}

.mesa-control-v2
.mesa-team > strong {
  max-width: 100%;

  margin-top: 4px;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  color:
    var(--mesa-text);

  font-size:
    clamp(17px, 2.6vw, 26px);

  font-weight: 1000;
}

.mesa-control-v2
.mesa-team-flag {
  width:
    clamp(58px, 8vw, 84px);

  height:
    clamp(58px, 8vw, 84px);

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  background:
    var(--mesa-surface-2);

  border:
    1px solid
    var(--mesa-border);
}

.mesa-control-v2
.mesa-team-flag img,
.mesa-control-v2
.mesa-team-flag .team-flag-img {
  width: 84% !important;
  height: 84% !important;

  object-fit:
    contain;
}

.mesa-vs-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.mesa-vs-v2 small {
  color:
    var(--mesa-muted);

  font-size: 8px;

  font-weight: 900;

  letter-spacing:
    .10em;
}

.mesa-vs-v2 strong {
  margin-top: 2px;

  color:
    var(--mesa-primary);

  font-size:
    clamp(35px, 6vw, 58px);

  line-height: .95;

  font-weight: 1000;

  letter-spacing:
    -.06em;
}


/* BOTON PRINCIPAL */

.mesa-control-v2
.mesa-main-btn-v2 {
  width: 100%;
  min-height: 50px;

  margin-top: 7px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  border: 0;

  border-radius: 14px;

  cursor: pointer;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  font-size: 14px;

  font-weight: 950;

  box-shadow:
    0 12px 28px
    rgba(37,99,235,.22);
}

.mesa-control-v2
.mesa-match-card-v2.is-live
.mesa-main-btn-v2 {
  background:
    linear-gradient(
      135deg,
      #ef4444,
      #b91c1c
    );

  box-shadow:
    0 12px 28px
    rgba(239,68,68,.20);
}


/* PANEL CATEGORIAS */

.mesa-category-panel {
  min-width: 0;

  padding:
    clamp(16px, 2vw, 20px);

  border-radius:
    clamp(20px, 3vw, 28px);

  border:
    1px solid
    var(--mesa-border);

  background:
    var(--mesa-surface);

  box-shadow:
    0 18px 48px
    rgba(15,23,42,.06);
}

.mesa-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;
}

.mesa-section-head span {
  color:
    var(--mesa-primary);

  font-size: 9px;

  font-weight: 950;

  letter-spacing:
    .11em;
}

.mesa-section-head h2 {
  margin: 3px 0 0;

  color:
    var(--mesa-text);

  font-size: 21px;

  font-weight: 1000;
}

.mesa-section-head > strong {
  min-width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color:
    var(--mesa-primary);

  background:
    var(--mesa-primary-soft);

  font-size: 17px;

  font-weight: 1000;
}

.mesa-category-list {
  display: grid;

  gap: 8px;
}

.mesa-category-row {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding:
    11px 12px;

  border-radius: 13px;

  border:
    1px solid
    var(--mesa-border);

  color:
    var(--mesa-text);

  background:
    var(--mesa-surface-2);

  cursor: pointer;

  text-align: left;
}

.mesa-category-row.is-selected {
  border-color:
    color-mix(
      in srgb,
      var(--mesa-primary) 45%,
      var(--mesa-border)
    );

  background:
    color-mix(
      in srgb,
      var(--mesa-primary) 8%,
      var(--mesa-surface)
    );
}

.mesa-category-row > div:first-child {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.mesa-category-row strong {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  color:
    var(--mesa-text);

  font-size: 13px;
}

.mesa-category-row span {
  margin-top: 2px;

  color:
    var(--mesa-muted);

  font-size: 10px;
}

.mesa-category-stats {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 4px;
}

.mesa-category-stats em {
  padding:
    4px 6px;

  border-radius: 7px;

  color:
    var(--mesa-muted);

  background:
    var(--mesa-surface);

  font-size: 8px;

  font-style: normal;

  font-weight: 900;
}

.mesa-category-stats em.live {
  color:
    var(--mesa-live);

  background:
    var(--mesa-live-soft);
}

.mesa-category-empty {
  padding: 20px;

  text-align: center;

  color:
    var(--mesa-muted);

  font-size: 12px;
}


/* VACIO */

.mesa-empty-v2 {
  min-height: 370px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px;

  text-align: center;

  border:
    1px dashed
    var(--mesa-border);

  border-radius:
    26px;

  background:
    var(--mesa-surface);
}

.mesa-empty-v2 > span {
  color:
    var(--mesa-primary);

  font-size: 10px;

  font-weight: 950;

  letter-spacing:
    .12em;
}

.mesa-empty-v2 strong {
  margin-top: 8px;

  color:
    var(--mesa-text);

  font-size:
    clamp(22px, 3vw, 30px);

  font-weight: 1000;
}

.mesa-empty-v2 p {
  margin:
    5px
    0
    0;

  color:
    var(--mesa-muted);
}


/* ACCESOS */

.mesa-control-v2
.mesa-actions-v2 {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(10px, 1.5vw, 14px);
}

.mesa-control-v2
.mesa-actions-v2 button {
  height: auto;
  min-height: 74px;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 11px;

  padding:
    12px 14px;

  border-radius: 16px;

  border:
    1px solid
    var(--mesa-border);

  color:
    var(--mesa-text);

  background:
    var(--mesa-surface);

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 9px 24px
    rgba(15,23,42,.045);
}

.mesa-action-code {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color:
    var(--mesa-primary);

  background:
    var(--mesa-primary-soft);

  font-size: 10px;

  font-weight: 1000;

  letter-spacing:
    .04em;
}

.mesa-actions-v2 button > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
}

.mesa-actions-v2 button strong {
  color:
    var(--mesa-text);

  font-size: 13px;
}

.mesa-actions-v2 button small {
  margin-top: 2px;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  color:
    var(--mesa-muted);

  font-size: 10px;
}

.mesa-actions-v2 button > b {
  color:
    var(--mesa-primary);

  font-size: 22px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .mesa-ops-header {
    grid-template-columns:
      1fr;
  }

  .mesa-control-v2
  .mesa-kpis-v2 {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .mesa-operation-grid {
    grid-template-columns:
      1fr;
  }

  .mesa-control-v2
  .mesa-actions-v2 {
    grid-template-columns:
      1fr;
  }

}

@media (max-width: 560px) {

  .mesa-control-v2 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .mesa-control-v2
  .mesa-kpis-v2 {
    gap: 8px;
  }

  .mesa-control-v2
  .mesa-kpi-card {
    min-height: 98px;

    padding:
      13px;
  }

  .mesa-match-head-v2 {
    flex-direction: column;
  }

  .mesa-match-identifiers {
    width: 100%;

    justify-content:
      flex-start;
  }

  .mesa-schedule {
    width: 100%;

    box-sizing:
      border-box;

    justify-content:
      center;
  }

  .mesa-control-v2
  .mesa-match-v2 {
    grid-template-columns:
      minmax(0, 1fr)
      58px
      minmax(0, 1fr);

    gap: 6px;
  }

  .mesa-vs-v2 small {
    display: none;
  }

  .mesa-control-v2
  .mesa-team > strong {
    font-size:
      clamp(
        13px,
        4vw,
        17px
      );
  }

  .mesa-category-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .mesa-category-stats {
    width: 100%;
  }

}

/* =========================================================
   LIGAYA MESA PROXIMO PARTIDO COMPACTO MOBILE V1
   ========================================================= */

@media (max-width: 560px) {

  /*
   * Tarjeta principal:
   * eliminamos la altura minima heredada
   * y reducimos espacio vertical.
   */
  .mesa-control-v2
  .mesa-match-card-v2 {
    height: auto;

    min-height: 0;

    padding:
      16px;
  }


  /*
   * Encabezado del partido.
   */
  .mesa-match-head-v2 {
    gap: 8px;
  }

  .mesa-match-head-v2 h2 {
    margin-top: 6px;

    font-size: 21px;
  }

  .mesa-match-badge {
    padding:
      5px
      8px;
  }

  .mesa-match-identifiers span,
  .mesa-match-identifiers strong {
    padding:
      5px
      8px;
  }


  /*
   * Fecha y hora.
   */
  .mesa-schedule {
    margin:
      12px
      0
      4px;

    padding:
      8px
      10px;
  }


  /*
   * Zona de equipos.
   */
  .mesa-control-v2
  .mesa-match-v2 {
    grid-template-columns:
      minmax(0, 1fr)
      50px
      minmax(0, 1fr);

    gap: 4px;

    padding:
      10px
      0
      8px;
  }


  /*
   * Escudo / bandera circular real.
   */
  .mesa-control-v2
  .mesa-team-flag {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    overflow: hidden;
  }

  .mesa-control-v2
  .mesa-team-flag img,
  .mesa-control-v2
  .mesa-team-flag .team-flag-img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    border-radius: 50%;

    object-fit: cover;
  }


  /*
   * Textos de equipos.
   */
  .mesa-control-v2
  .mesa-team > span {
    margin-top: 5px;

    font-size: 8px;
  }

  .mesa-control-v2
  .mesa-team > strong {
    margin-top: 2px;

    font-size:
      clamp(
        13px,
        4vw,
        16px
      );
  }


  /*
   * VS mas proporcionado.
   */
  .mesa-vs-v2 strong {
    margin-top: 0;

    font-size: 32px;
  }


  /*
   * Boton principal compacto.
   */
  .mesa-control-v2
  .mesa-main-btn-v2 {
    min-height: 46px;

    margin-top: 3px;

    border-radius: 13px;
  }

}

/* =========================================================
   LIGAYA MESA HEADER PARTIDO MOBILE V1
   ========================================================= */

@media (max-width: 560px) {

  .mesa-control-v2
  .mesa-match-head-v2 {
    flex-direction: row;

    align-items:
      flex-start;

    justify-content:
      space-between;

    gap: 10px;
  }


  .mesa-control-v2
  .mesa-match-head-v2
  > div:first-child {
    min-width: 0;

    flex:
      1 1 auto;
  }


  .mesa-control-v2
  .mesa-match-identifiers {
    width: auto;

    flex:
      0 0 auto;

    justify-content:
      flex-end;

    align-self:
      flex-start;

    gap: 6px;

    margin-top: 0;
  }


  .mesa-control-v2
  .mesa-match-head-v2 h2 {
    margin-top: 6px;
  }

}

/* =========================================================
   LIGAYA MESA KPIS UNA FILA MOBILE V1
   ========================================================= */

@media (max-width: 560px) {

  .mesa-control-v2
  .mesa-kpis-v2 {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );

    gap: 6px;
  }


  .mesa-control-v2
  .mesa-kpi-card {
    min-width: 0;

    min-height: 78px;

    padding:
      10px
      7px
      9px;

    border-radius: 15px;
  }


  .mesa-control-v2
  .mesa-kpi-card::before {
    width: 3px;
  }


  .mesa-control-v2
  .mesa-kpi-label {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 7px;

    letter-spacing: .03em;
  }


  .mesa-control-v2
  .mesa-kpi-card strong {
    margin-top: 5px;

    font-size: 26px;

    line-height: .9;
  }


  .mesa-control-v2
  .mesa-kpi-card small {
    margin-top: 6px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 8px;

    line-height: 1.1;
  }

}

/* =========================================================
   LIGAYA MESA KPIS MOBILE REFINADOS V2
   ========================================================= */

@media (max-width: 560px) {

  .mesa-control-v2
  .mesa-kpi-card {
    min-height: 76px;

    padding:
      10px
      6px
      9px;

    text-align: center;

    border-radius: 14px;

    box-shadow:
      0 8px 20px
      rgba(15,23,42,.045);
  }


  /*
   * Quitamos la barra vertical
   * y la convertimos en un indicador discreto.
   */
  .mesa-control-v2
  .mesa-kpi-card::before {
    left: auto;
    right: 8px;

    top: 8px;
    bottom: auto;

    width: 6px;
    height: 6px;

    border-radius: 50%;
  }


  .mesa-control-v2
  .mesa-kpi-label {
    font-size: 7px;

    letter-spacing: .02em;

    text-align: center;
  }


  .mesa-control-v2
  .mesa-kpi-card strong {
    margin-top: 5px;

    font-size: 25px;

    line-height: 1;

    text-align: center;
  }


  .mesa-control-v2
  .mesa-kpi-card small {
    margin-top: 5px;

    font-size: 7px;

    text-align: center;
  }

}

/* =========================================================
   LIGAYA MESA KPIS TIPOGRAFIA MOBILE V3
   ========================================================= */

@media (max-width: 560px) {

  .mesa-control-v2
  .mesa-kpi-label {
    font-size: 9px;

    line-height: 1.1;

    letter-spacing: .01em;
  }


  .mesa-control-v2
  .mesa-kpi-card strong {
    font-size: 27px;

    line-height: .95;
  }


  .mesa-control-v2
  .mesa-kpi-card small {
    font-size: 8px;

    line-height: 1.15;
  }

}

/* =========================================================
   LIGAYA MESA KPIS ACENTO SUPERIOR V4
   ========================================================= */

@media (max-width: 560px) {

  .mesa-control-v2
  .mesa-kpi-card::before {
    left: 50%;
    right: auto;

    top: 0;
    bottom: auto;

    width: 22px;
    height: 3px;

    border-radius:
      0 0 999px 999px;

    transform:
      translateX(-50%);
  }

}

/* =========================================================
   LIGAYA MESA CATEGORIAS PREMIUM V1
   ========================================================= */

.mesa-control-v2
.mesa-category-panel {
  position: relative;

  overflow: hidden;

  border-color:
    color-mix(
      in srgb,
      var(--mesa-primary) 18%,
      var(--mesa-border)
    );

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--mesa-primary) 3%,
        var(--mesa-surface)
      ) 0%,
      var(--mesa-surface) 100%
    );

  box-shadow:
    0 14px 32px
    rgba(15,23,42,.075);
}


/* CABECERA */

.mesa-control-v2
.mesa-section-head {
  margin-bottom: 16px;
}


.mesa-control-v2
.mesa-section-head span {
  display: inline-flex;

  align-items: center;

  padding:
    5px
    8px;

  border-radius:
    999px;

  color:
    var(--mesa-primary);

  background:
    var(--mesa-primary-soft);

  font-size: 8px;

  letter-spacing:
    .10em;
}


.mesa-control-v2
.mesa-section-head h2 {
  margin-top: 6px;

  font-size: 22px;
}


/* CONTADOR */

.mesa-control-v2
.mesa-section-head > strong {
  min-width: 42px;
  height: 42px;

  border-radius: 14px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  box-shadow:
    0 8px 20px
    rgba(37,99,235,.22);
}


/* LISTA */

.mesa-control-v2
.mesa-category-list {
  gap: 10px;
}


/* MINI TARJETA DE CATEGORIA */

.mesa-control-v2
.mesa-category-row {
  position: relative;

  overflow: hidden;

  padding:
    14px
    15px;

  border-radius:
    16px;

  border-color:
    color-mix(
      in srgb,
      var(--mesa-primary) 14%,
      var(--mesa-border)
    );

  background:
    linear-gradient(
      135deg,
      var(--mesa-surface-2) 0%,
      var(--mesa-surface) 100%
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035),
    0 6px 16px
    rgba(15,23,42,.045);

  transition:
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}


/* CATEGORIA SELECCIONADA */

.mesa-control-v2
.mesa-category-row.is-selected {
  border-color:
    color-mix(
      in srgb,
      var(--mesa-primary) 55%,
      var(--mesa-border)
    );

  background:
    color-mix(
      in srgb,
      var(--mesa-primary) 8%,
      var(--mesa-surface)
    );

  box-shadow:
    0 0 0 1px
    color-mix(
      in srgb,
      var(--mesa-primary) 14%,
      transparent
    ),
    0 8px 20px
    rgba(15,23,42,.06);
}


/* NOMBRE */

.mesa-control-v2
.mesa-category-row strong {
  font-size: 15px;

  font-weight: 950;
}


/* TOTAL DE PARTIDOS */

.mesa-control-v2
.mesa-category-row span {
  margin-top: 3px;

  font-size: 10px;
}


/* ESTADISTICAS */

.mesa-control-v2
.mesa-category-stats {
  gap: 6px;
}


.mesa-control-v2
.mesa-category-stats em {
  min-width: 44px;

  padding:
    6px
    8px;

  box-sizing:
    border-box;

  text-align: center;

  border-radius:
    999px;

  border:
    1px solid
    var(--mesa-border);

  font-size: 9px;

  line-height: 1;

  background:
    var(--mesa-surface-2);
}


/* PENDIENTES */

.mesa-control-v2
.mesa-category-stats em:first-child {
  color:
    var(--mesa-primary);

  border-color:
    color-mix(
      in srgb,
      var(--mesa-primary) 24%,
      var(--mesa-border)
    );

  background:
    color-mix(
      in srgb,
      var(--mesa-primary) 9%,
      var(--mesa-surface)
    );
}


/* FINALIZADOS */

.mesa-control-v2
.mesa-category-stats em:last-child {
  color:
    var(--mesa-success);

  border-color:
    color-mix(
      in srgb,
      var(--mesa-success) 24%,
      var(--mesa-border)
    );

  background:
    color-mix(
      in srgb,
      var(--mesa-success) 9%,
      var(--mesa-surface)
    );
}


/* EN VIVO SI EXISTE */

.mesa-control-v2
.mesa-category-stats em.live {
  color:
    var(--mesa-live);

  border-color:
    color-mix(
      in srgb,
      var(--mesa-live) 28%,
      var(--mesa-border)
    );

  background:
    var(--mesa-live-soft);
}


/* MOVIL */

@media (max-width: 560px) {

  .mesa-control-v2
  .mesa-category-panel {
    padding:
      16px;
  }


  .mesa-control-v2
  .mesa-category-row {
    flex-direction: row;

    align-items: center;

    gap: 10px;

    padding:
      13px
      14px;
  }


  .mesa-control-v2
  .mesa-category-row
  > div:first-child {
    flex:
      1 1 auto;
  }


  .mesa-control-v2
  .mesa-category-stats {
    width: auto;

    flex:
      0 0 auto;

    margin-left: auto;

    justify-content:
      flex-end;
  }

}

/* =========================================================
   LIGAYA MARCADOR EMPTY STATE PRO V1
   ========================================================= */

.score-empty-pro {
  min-height:
    calc(100dvh - 230px);

  display: grid;

  place-items: center;

  padding:
    34px
    16px
    120px;

  box-sizing:
    border-box;
}


.score-empty-pro
.score-empty-card {
  width:
    min(
      100%,
      470px
    );

  padding:
    clamp(
      26px,
      6vw,
      40px
    );

  box-sizing:
    border-box;

  text-align:
    center;

  border-radius:
    28px;

  border:
    1px solid
    #d5e1ef;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7faff 100%
    );

  box-shadow:
    0 20px 50px
    rgba(30,64,175,.09);
}


.score-empty-icon {
  width: 74px;
  height: 74px;

  margin:
    0 auto
    18px;

  display: grid;

  place-items:
    center;

  border-radius:
    24px;

  color:
    #2563eb;

  background:
    linear-gradient(
      145deg,
      #e8f1ff,
      #dbeafe
    );

  border:
    1px solid
    #bfdbfe;

  box-shadow:
    0 10px 25px
    rgba(37,99,235,.12);
}


.score-empty-icon svg {
  width: 36px;
  height: 36px;
}


.score-empty-eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    6px
    10px;

  border-radius:
    999px;

  color:
    #2563eb;

  background:
    #e8f1ff;

  font-size:
    9px;

  font-weight:
    950;

  letter-spacing:
    .12em;
}


.score-empty-pro h2 {
  margin:
    13px
    0
    7px;

  color:
    #0f172a;

  font-size:
    clamp(
      23px,
      5vw,
      30px
    );

  line-height:
    1.08;

  font-weight:
    1000;
}


.score-empty-pro p {
  max-width:
    350px;

  margin:
    0 auto;

  color:
    #64748b;

  font-size:
    13px;

  line-height:
    1.55;
}


.score-empty-info {
  margin-top:
    22px;

  padding:
    13px
    14px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  text-align:
    left;

  border-radius:
    14px;

  color:
    #52657c;

  background:
    #f4f8fd;

  border:
    1px solid
    #d9e5f1;

  font-size:
    11px;

  line-height:
    1.45;
}


.score-empty-info strong {
  color:
    #0f172a;
}


.score-empty-dot {
  width:
    8px;

  height:
    8px;

  margin-top:
    4px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    #2563eb;

  box-shadow:
    0 0 0 4px
    rgba(37,99,235,.11);
}


.score-empty-action {
  width:
    100%;

  min-height:
    52px;

  margin-top:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border:
    0;

  border-radius:
    15px;

  cursor:
    pointer;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #334de8
    );

  box-shadow:
    0 12px 26px
    rgba(37,99,235,.23);

  font-family:
    inherit;

  font-size:
    14px;

  font-weight:
    950;
}


.score-empty-action svg {
  width:
    18px;

  height:
    18px;
}


/* DARK */

:root[data-theme="dark"]
.score-empty-pro
.score-empty-card {
  background:
    linear-gradient(
      180deg,
      #0d1b2d 0%,
      #091624 100%
    );

  border-color:
    #1e3552;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.24);
}


:root[data-theme="dark"]
.score-empty-icon {
  color:
    #60a5fa;

  background:
    rgba(59,130,246,.13);

  border-color:
    #254563;
}


:root[data-theme="dark"]
.score-empty-eyebrow {
  color:
    #60a5fa;

  background:
    rgba(59,130,246,.14);
}


:root[data-theme="dark"]
.score-empty-pro h2 {
  color:
    #f8fafc;
}


:root[data-theme="dark"]
.score-empty-pro p {
  color:
    #94a3b8;
}


:root[data-theme="dark"]
.score-empty-info {
  color:
    #a8b6c8;

  background:
    #101f33;

  border-color:
    #1e3552;
}


:root[data-theme="dark"]
.score-empty-info strong {
  color:
    #f8fafc;
}


/* MOVIL */

@media (max-width: 560px) {

  .score-empty-pro {
    min-height:
      calc(100dvh - 210px);

    padding:
      22px
      12px
      110px;
  }


  .score-empty-pro
  .score-empty-card {
    padding:
      26px
      20px;

    border-radius:
      24px;
  }


  .score-empty-icon {
    width:
      66px;

    height:
      66px;

    margin-bottom:
      15px;

    border-radius:
      21px;
  }


  .score-empty-icon svg {
    width:
      32px;

    height:
      32px;
  }


  .score-empty-info {
    margin-top:
      18px;
  }

}

/* =========================================================
   LIGAYA MESA ANCHO MOBILE V1
   Alinea Mesa con Fixture y Tabla
   ========================================================= */

@media (max-width: 560px) {

  .mesa-page.mesa-control-v2 {
    width: 100%;
    box-sizing: border-box;

    padding-left: 0;
    padding-right: 0;
  }

}

/* =========================================================
   LIGAYA DASHBOARD PUBLICO PREMIUM V1
   ========================================================= */

.public-dashboard {
  --pub-bg: #06101d;
  --pub-surface: #0b1a2c;
  --pub-surface-2: #10243a;
  --pub-border: rgba(148, 163, 184, .18);
  --pub-text: #f8fafc;
  --pub-muted: #91a4bd;
  --pub-primary: #3974f6;
  --pub-primary-soft: rgba(57, 116, 246, .16);
  --pub-cyan: #22d3ee;
  --pub-success: #22c55e;
  --pub-warning: #f59e0b;
  --pub-danger: #ef4444;

  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  padding: 16px 0 120px;
  color: var(--pub-text);
}


/* HERO */

.public-dashboard .public-hero-pro {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 26px 24px;
  box-sizing: border-box;
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 15%, rgba(34, 211, 238, .28), transparent 34%),
    radial-gradient(circle at 5% 100%, rgba(59, 130, 246, .30), transparent 42%),
    linear-gradient(135deg, #2449c8 0%, #11256e 52%, #071328 100%);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.public-dashboard .public-hero-pro::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -55px;
  bottom: -70px;
  border: 30px solid rgba(255,255,255,.035);
  border-radius: 50%;
  pointer-events: none;
}

.public-dashboard .public-hero-content,
.public-dashboard .live-hero {
  position: relative;
  z-index: 1;
}

.public-dashboard .public-hero-content > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #dbeafe;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
}

.public-dashboard .public-hero-content h1 {
  margin: 12px 0 6px;
  color: #ffffff;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1;
  font-weight: 1000;
}

.public-dashboard .public-hero-content p {
  max-width: 280px;
  margin: 0;
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.45;
}

.public-dashboard .public-hero-status {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.public-dashboard .public-hero-status b,
.public-dashboard .public-hero-status small {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  color: #ffffff;
  font-weight: 850;
  backdrop-filter: blur(8px);
}


/* KPIS */

.public-dashboard .public-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.public-dashboard .public-kpi-card {
  min-width: 0;
  min-height: 98px;
  padding: 13px 7px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pub-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(17,38,61,.98), rgba(9,24,41,.98));
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

.public-dashboard .public-kpi-card span {
  font-size: 20px;
  line-height: 1;
}

.public-dashboard .public-kpi-card strong {
  margin-top: 7px;
  color: #5b8cff;
  font-size: 25px;
  line-height: 1;
  font-weight: 1000;
}

.public-dashboard .public-kpi-card small {
  margin-top: 6px;
  color: #b8c7da;
  font-size: 10px;
  font-weight: 800;
}


/* SELECTOR DE COMPETENCIA */

.public-dashboard .public-category-scope {
  width: 100%;
}

.public-dashboard .public-category-switch {
  padding: 14px;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(18,42,69,.98), rgba(7,24,43,.98));
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

.public-dashboard .public-category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.public-dashboard .public-category-heading span {
  color: #7fa5d7;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
}

.public-dashboard .public-category-heading strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-dashboard .public-category-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.public-dashboard .public-category-chip {
  min-width: 0;
  min-height: 42px;
  padding: 0 8px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  color: #aebfd3;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.public-dashboard .public-category-chip:active {
  transform: scale(.97);
}

.public-dashboard .public-category-chip.is-active {
  border-color: #4f83ff;
  background:
    linear-gradient(135deg, #3774f7, #2857d9);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(49,103,235,.28);
}


/* TARJETAS PRINCIPALES */

.public-dashboard .public-next-card,
.public-dashboard .public-teams-card,
.public-dashboard .public-top-card,
.public-dashboard .public-results-card {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--pub-border);
  border-radius: 24px;
  background:
    linear-gradient(180deg, #0d2035 0%, #091827 100%);
  box-shadow:
    0 14px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.public-dashboard .public-next-header,
.public-dashboard .public-teams-header,
.public-dashboard .public-top-header,
.public-dashboard .public-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.public-dashboard .public-next-header h3,
.public-dashboard .public-teams-header h3,
.public-dashboard .public-top-header h3,
.public-dashboard .public-results-header h3 {
  margin: 0;
  color: #f8fafc !important;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 950;
}

.public-dashboard .public-next-header small,
.public-dashboard .public-teams-header small,
.public-dashboard .public-top-header small,
.public-dashboard .public-results-header small {
  display: block;
  margin-top: 4px;
  color: #8da2bd !important;
  font-size: 11px;
  font-weight: 600;
}

.public-dashboard .next-time {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--pub-primary-soft);
  color: #74a1ff;
  font-weight: 950;
}


/* PROXIMO PARTIDO */

.public-dashboard .next-match-row {
  align-items: center;
  margin-top: 4px;
}

.public-dashboard .next-team strong {
  color: #f8fafc !important;
}

.public-dashboard .next-vs span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3974f6, #244ed1);
  color: #ffffff;
  font-size: 21px;
  font-weight: 1000;
  box-shadow: 0 10px 22px rgba(57,116,246,.28);
}

.public-dashboard .next-status {
  margin-top: 12px;
  text-align: center;
}

.public-dashboard .next-status span {
  display: inline-flex;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(59,130,246,.13);
  color: #8db1ff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
}


/* EQUIPOS */

.public-dashboard .public-teams-list {
  display: grid;
  gap: 9px;
}

.public-dashboard .public-team-row {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) 22px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
  text-align: left;
  cursor: pointer;
}

.public-dashboard .public-team-info strong {
  color: #f8fafc !important;
  font-size: 14px;
  font-weight: 900;
}

.public-dashboard .public-team-info small {
  color: #6f9cff !important;
  font-weight: 800;
}

.public-dashboard .public-team-info p {
  margin: 3px 0 0;
  color: #8499b3 !important;
  font-size: 10px;
}

.public-dashboard .public-team-arrow {
  color: #7090b7;
  font-size: 23px;
}


/* CLASIFICACION */

.public-dashboard .public-top-header button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(96,165,250,.20);
  border-radius: 12px;
  background: rgba(59,130,246,.10);
  color: #79a3ff;
  font-weight: 850;
}

.public-dashboard .public-top-list {
  display: grid;
  gap: 10px;
}

.public-dashboard .public-category-ranking {
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}

.public-dashboard .public-category-ranking-head {
  width: 100%;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(148,163,184,.12);
  background: rgba(255,255,255,.035);
  text-align: left;
}

.public-dashboard .public-category-ranking-head span {
  display: block;
  color: #6988ae;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
}

.public-dashboard .public-category-ranking-head strong {
  display: block;
  margin-top: 2px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
}

.public-dashboard .public-category-ranking-head small {
  color: #6f9cff;
  font-size: 10px;
  font-weight: 850;
}

.public-dashboard .public-category-ranking-list {
  padding: 9px;
}

.public-dashboard .public-top-row {
  border-color: rgba(148,163,184,.12);
  background: rgba(255,255,255,.035);
}

.public-dashboard .public-top-row strong {
  color: #f8fafc !important;
}

.public-dashboard .public-top-row small {
  color: #8ca0b9 !important;
}

.public-dashboard .public-top-row b {
  color: #6794ff !important;
}


/* RESULTADOS */

.public-dashboard .public-results-list {
  display: grid;
  gap: 9px;
}

.public-dashboard .public-result-row {
  border: 1px solid rgba(148,163,184,.12);
  background: rgba(255,255,255,.035);
}

.public-dashboard .public-result-row strong {
  color: #f8fafc !important;
}

.public-dashboard .result-score {
  color: #6f9cff;
}

.public-dashboard .empty-mini {
  color: #8da2bd;
}


/* LIGHT MODE */

html[data-theme="light"] .public-dashboard {
  --pub-surface: #ffffff;
  --pub-surface-2: #f8fbff;
  --pub-border: #dce6f2;
  --pub-text: #0f172a;
  --pub-muted: #64748b;
}

html[data-theme="light"] .public-dashboard .public-category-switch,
html[data-theme="light"] .public-dashboard .public-next-card,
html[data-theme="light"] .public-dashboard .public-teams-card,
html[data-theme="light"] .public-dashboard .public-top-card,
html[data-theme="light"] .public-dashboard .public-results-card {
  border-color: #dce6f2;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15,23,42,.07);
}

html[data-theme="light"] .public-dashboard .public-category-heading strong,
html[data-theme="light"] .public-dashboard .public-next-header h3,
html[data-theme="light"] .public-dashboard .public-teams-header h3,
html[data-theme="light"] .public-dashboard .public-top-header h3,
html[data-theme="light"] .public-dashboard .public-results-header h3,
html[data-theme="light"] .public-dashboard .public-team-info strong,
html[data-theme="light"] .public-dashboard .public-top-row strong,
html[data-theme="light"] .public-dashboard .public-result-row strong,
html[data-theme="light"] .public-dashboard .next-team strong {
  color: #0f172a !important;
}

html[data-theme="light"] .public-dashboard .public-category-chip {
  border-color: #dbe5f0;
  background: #f3f7fc;
  color: #64748b;
}

html[data-theme="light"] .public-dashboard .public-category-chip.is-active {
  border-color: #3974f6;
  background: linear-gradient(135deg, #3974f6, #2858da);
  color: #ffffff;
}

html[data-theme="light"] .public-dashboard .public-team-row,
html[data-theme="light"] .public-dashboard .public-category-ranking,
html[data-theme="light"] .public-dashboard .public-category-ranking-head,
html[data-theme="light"] .public-dashboard .public-top-row,
html[data-theme="light"] .public-dashboard .public-result-row {
  border-color: #e1e9f3;
  background: #f8fafc;
}

html[data-theme="light"] .public-dashboard .public-kpi-card {
  border-color: #dce6f2;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

html[data-theme="light"] .public-dashboard .public-kpi-card small {
  color: #64748b;
}


@media (max-width: 560px) {

  .public-dashboard {
    gap: 14px;
    padding-left: 0;
    padding-right: 0;
  }

  .public-dashboard .public-hero-pro {
    min-height: 200px;
    padding: 24px 20px;
    border-radius: 26px;
  }

  .public-dashboard .public-kpi-grid {
    gap: 7px;
  }

  .public-dashboard .public-kpi-card {
    min-height: 94px;
    border-radius: 16px;
  }

  .public-dashboard .public-next-card,
  .public-dashboard .public-teams-card,
  .public-dashboard .public-top-card,
  .public-dashboard .public-results-card {
    padding: 16px;
    border-radius: 22px;
  }

}

/* =========================================================
   LIGAYA PUBLIC CATEGORY SCROLLER V2
   Selector escalable para cualquier cantidad de categorias
   ========================================================= */

.public-dashboard .public-category-switch {
  overflow: hidden;
}

.public-dashboard .public-category-chips {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 5px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.public-dashboard .public-category-chips::-webkit-scrollbar {
  display: none;
}

.public-dashboard .public-category-chip {
  flex: 0 0 auto;
  width: auto;
  min-width: 92px;
  min-height: 42px;
  padding: 0 18px;
  scroll-snap-align: start;
  white-space: nowrap;
}

.public-dashboard .public-category-chip:first-child {
  min-width: 84px;
}

.public-dashboard .public-category-heading {
  margin-bottom: 12px;
}

@media (max-width: 560px) {

  .public-dashboard .public-category-switch {
    padding: 13px 14px;
  }

  .public-dashboard .public-category-chip {
    min-width: 96px;
    min-height: 42px;
    padding: 0 17px;
    font-size: 12px;
  }

  .public-dashboard .public-category-chip:first-child {
    min-width: 82px;
  }

}

/* =========================================================
   LIGAYA PUBLIC EQUIPOS POR CATEGORIA V1
   ========================================================= */

.public-dashboard .public-category-teams-scroller {
  display: flex;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 7px;
  box-sizing: border-box;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.public-dashboard .public-category-teams-scroller::-webkit-scrollbar {
  display: none;
}

.public-dashboard .public-category-team-summary {
  flex: 0 0 245px;
  min-height: 150px;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

.public-dashboard .public-category-team-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.public-dashboard .public-category-team-head span {
  display: block;
  color: #6e8db1;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
}

.public-dashboard .public-category-team-head strong {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 950;
}

.public-dashboard .public-category-team-head small {
  flex-shrink: 0;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(59,130,246,.12);
  color: #77a2ff;
  font-size: 9px;
  font-weight: 850;
}

.public-dashboard .public-category-team-logos {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin-top: 15px;
  padding-left: 4px;
}

.public-dashboard .public-category-team-logo,
.public-dashboard .public-category-team-more {
  width: 44px;
  height: 44px;
  margin-left: -7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #10243a;
  border-radius: 50%;
  background: #ffffff;
  box-sizing: border-box;
  box-shadow: 0 5px 14px rgba(0,0,0,.20);
}

.public-dashboard .public-category-team-logo:first-child {
  margin-left: 0;
}

.public-dashboard .public-category-team-logo .team-flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-dashboard .public-category-team-more {
  background: #1d3f68;
  color: #a9c5ff;
  font-size: 11px;
  font-weight: 950;
}

.public-dashboard .public-category-team-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(148,163,184,.12);
  color: #80a8ff;
  font-size: 10px;
  font-weight: 850;
}

.public-dashboard .public-category-team-foot b {
  font-size: 15px;
}

html[data-theme="light"] .public-dashboard
.public-category-team-summary {
  border-color: #dce6f2;
  background: #f8fafc;
}

html[data-theme="light"] .public-dashboard
.public-category-team-head strong {
  color: #0f172a;
}

html[data-theme="light"] .public-dashboard
.public-category-team-logo,
html[data-theme="light"] .public-dashboard
.public-category-team-more {
  border-color: #f8fafc;
}

@media (max-width: 560px) {

  .public-dashboard .public-category-team-summary {
    flex-basis: 82%;
    min-height: 146px;
  }

}

/* =========================================================
   LIGAYA PUBLIC LIDERES CATEGORIA V1
   ========================================================= */

.public-dashboard .public-leaders-scroller {
  display: flex;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 7px;
  box-sizing: border-box;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.public-dashboard .public-leaders-scroller::-webkit-scrollbar {
  display: none;
}

.public-dashboard .public-leader-card {
  flex: 0 0 250px;
  min-height: 168px;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  color: inherit;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

.public-dashboard .public-leader-category span {
  display: block;
  color: #6e8db1;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
}

.public-dashboard .public-leader-category strong {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 950;
}

.public-dashboard .public-leader-main {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.public-dashboard .public-leader-medal {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(245,158,11,.12);
  font-size: 22px;
}

.public-dashboard .public-leader-info small {
  display: block;
  color: #6e8db1;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.public-dashboard .public-leader-info strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-dashboard .public-leader-info span {
  display: block;
  margin-top: 2px;
  color: #8ca0b9;
  font-size: 10px;
}

.public-dashboard .public-leader-main > b {
  color: #6794ff;
  font-size: 22px;
  font-weight: 1000;
  white-space: nowrap;
}

.public-dashboard .public-leader-main > b small {
  font-size: 9px;
  font-weight: 800;
}

.public-dashboard .public-leader-empty {
  min-height: 54px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  color: #8499b3;
  font-size: 11px;
}

.public-dashboard .public-leader-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.12);
  color: #80a8ff;
  font-size: 10px;
  font-weight: 850;
}

html[data-theme="light"] .public-dashboard .public-leader-card {
  border-color: #dce6f2;
  background: #f8fafc;
}

html[data-theme="light"] .public-dashboard .public-leader-category strong,
html[data-theme="light"] .public-dashboard .public-leader-info strong {
  color: #0f172a;
}

@media (max-width: 560px) {

  .public-dashboard .public-leader-card {
    flex-basis: 82%;
  }

}

/* =========================================================
   LIGAYA PUBLIC RESULTADOS CATEGORIA V1
   ========================================================= */

.public-dashboard .public-result-item {
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.028);
}

.public-dashboard .public-result-item
.public-result-row {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.public-dashboard .public-result-category {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin: 11px 0 0 12px;
  padding: 0 10px;
  border: 1px solid rgba(96,165,250,.18);
  border-radius: 999px;
  background: rgba(59,130,246,.12);
  color: #7fa8ff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.public-dashboard .public-result-item
.public-result-category + .public-result-row {
  padding-top: 10px;
}

html[data-theme="light"] .public-dashboard
.public-result-item {
  border-color: #dfe7f1;
  background: #f8fafc;
}

html[data-theme="light"] .public-dashboard
.public-result-item .public-result-row {
  background: transparent;
}

@media (max-width: 560px) {

  .public-dashboard .public-result-category {
    margin-left: 11px;
  }

}

/* =========================================================
   LIGAYA PUBLIC PROXIMOS SCROLLER V1
   ========================================================= */

.public-dashboard .public-next-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(96,165,250,.18);
  border-radius: 999px;
  background: rgba(59,130,246,.12);
  color: #78a3ff;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.public-dashboard .public-next-scroller {
  display: flex;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 7px;
  box-sizing: border-box;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.public-dashboard .public-next-scroller::-webkit-scrollbar {
  display: none;
}

.public-dashboard .public-next-match-card {
  flex: 0 0 88%;
  min-width: 0;
  padding: 13px 12px 12px;
  box-sizing: border-box;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 19px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  scroll-snap-align: start;
}

.public-dashboard .public-next-match-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  margin-bottom: 12px;
}

.public-dashboard .public-next-match-meta > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.public-dashboard .public-next-category,
.public-dashboard .public-next-round {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  white-space: nowrap;
}

.public-dashboard .public-next-category {
  border: 1px solid rgba(96,165,250,.19);
  background: rgba(59,130,246,.12);
  color: #7fa8ff;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.public-dashboard .public-next-round {
  background: rgba(148,163,184,.08);
  color: #91a4bd;
}

.public-dashboard .public-next-match-meta > strong {
  flex: 0 0 auto;
  color: #78a3ff;
  font-size: 14px;
  font-weight: 950;
}

.public-dashboard .public-next-match-card .next-match-row {
  margin-top: 0;
}

.public-dashboard .public-next-match-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.10);
}

.public-dashboard .public-next-match-foot span {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(59,130,246,.12);
  color: #8db1ff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .06em;
}

.public-dashboard .public-next-match-foot small {
  color: #7188a5;
  font-size: 9px;
  font-weight: 750;
}

html[data-theme="light"] .public-dashboard
.public-next-match-card {
  border-color: #dfe7f1;
  background: #f8fafc;
}

@media (max-width: 560px) {

  .public-dashboard .public-next-match-card {
    flex-basis: 88%;
  }

  .public-dashboard .public-next-header h3 {
    font-size: 17px;
  }

}

/* =========================================================
   LIGAYA PUBLIC PROXIMOS COMPACT V2
   ========================================================= */

.public-dashboard .public-next-scroller {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.public-dashboard .public-next-scroller::-webkit-scrollbar {
  display: none;
}

.public-dashboard .public-next-match-card-compact {
  flex: 0 0 86%;
  min-width: 0;
  min-height: auto;
  padding: 12px;
  border-radius: 18px;
  scroll-snap-align: start;
}

.public-dashboard .public-next-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.public-dashboard .public-next-mini-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.public-dashboard .public-next-mini-time {
  flex: 0 0 auto;
  color: #78a3ff;
  font-size: 14px;
  font-weight: 950;
}

.public-dashboard .public-next-mini-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    68px
    minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.public-dashboard .public-next-mini-team {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.public-dashboard .public-next-mini-team strong {
  margin-top: 7px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.public-dashboard .public-next-mini-flag {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
}

.public-dashboard .public-next-mini-flag img,
.public-dashboard .public-next-mini-flag .team-flag-img {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain;
}

.public-dashboard .public-next-mini-vs {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      #4f7cff,
      #3558f5
    );
  box-shadow:
    0 12px 26px
    rgba(37,99,235,.18);
  color: #ffffff;
  font-size: 20px;
  font-weight: 1000;
}

.public-dashboard .public-next-mini-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.10);
}

.public-dashboard .public-next-mini-foot span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.12);
  color: #8db1ff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .06em;
}

.public-dashboard .public-next-mini-foot small {
  color: #7188a5;
  font-size: 9px;
  font-weight: 750;
}

@media (max-width: 560px) {

  .public-dashboard .public-next-match-card-compact {
    flex-basis: 88%;
    padding: 11px;
  }

  .public-dashboard .public-next-mini-row {
    grid-template-columns:
      minmax(0, 1fr)
      58px
      minmax(0, 1fr);
    gap: 6px;
  }

  .public-dashboard .public-next-mini-vs {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 18px;
  }

  .public-dashboard .public-next-mini-flag {
    width: 62px;
    height: 62px;
  }

  .public-dashboard .public-next-mini-flag img,
  .public-dashboard .public-next-mini-flag .team-flag-img {
    width: 62px !important;
    height: 62px !important;
  }

  .public-dashboard .public-next-mini-team strong {
    font-size: 12px;
  }

}
/* =========================================================
   LIGAYA PUBLIC WIDTH CONTAINMENT V1
   Evita que los carruseles ensanchen el dashboard
   ========================================================= */

.public-dashboard {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
  box-sizing: border-box;
}

.public-dashboard > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.public-dashboard .public-kpi-grid,
.public-dashboard .public-category-scope,
.public-dashboard .public-next-card,
.public-dashboard .public-teams-card,
.public-dashboard .public-top-card,
.public-dashboard .public-results-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.public-dashboard .public-category-chips,
.public-dashboard .public-next-scroller,
.public-dashboard .public-category-teams-scroller,
.public-dashboard .public-leaders-scroller {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.public-dashboard .public-next-match-card-compact,
.public-dashboard .public-category-team-summary,
.public-dashboard .public-leader-card {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 560px) {

  .public-dashboard {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

}

/* =========================================================
   LIGAYA PUBLIC NEXT LOGOS NORMALIZADOS V1
   ========================================================= */

.public-dashboard .public-next-mini-flag {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: #ffffff;
  box-sizing: border-box;
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(15,23,42,.08);
}

.public-dashboard .public-next-mini-flag img,
.public-dashboard .public-next-mini-flag .team-flag-img {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 560px) {

  .public-dashboard .public-next-mini-flag {
    width: 62px;
    height: 62px;
  }

  .public-dashboard .public-next-mini-flag img,
  .public-dashboard .public-next-mini-flag .team-flag-img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }

}

/* =========================================================
   LIGAYA PUBLIC NEXT LOGOS FULL V2
   Logos ocupan todo el circulo
   ========================================================= */

.public-dashboard .public-next-mini-flag {
  width: 62px;
  height: 62px;
  padding: 0;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 50%;
  background: #ffffff;
  box-sizing: border-box;
}

.public-dashboard .public-next-mini-flag img,
.public-dashboard .public-next-mini-flag .team-flag-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  display: block;
}

/* =========================================================
   LIGAYA PUBLIC NEXT EMPTY PREMIUM V1
   ========================================================= */

.public-dashboard .public-next-empty {
  min-height: 118px;
  padding: 18px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  border: 1px dashed rgba(96,165,250,.24);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(59,130,246,.12),
      transparent 38%
    ),
    rgba(255,255,255,.018);
}

.public-dashboard .public-next-empty-icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #3974f6,
      #2857d9
    );

  color: #ffffff;
  font-size: 22px;
  font-weight: 1000;

  box-shadow:
    0 10px 24px rgba(57,116,246,.25);
}

.public-dashboard .public-next-empty-copy {
  min-width: 0;
  flex: 1;
}

.public-dashboard .public-next-empty-copy strong {
  display: block;
  color: #f8fafc;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.15;
}

.public-dashboard .public-next-empty-copy small {
  display: block;
  margin-top: 5px;
  color: #8fa4be;
  font-size: 11px;
  line-height: 1.4;
}

html[data-theme="light"]
.public-dashboard .public-next-empty {
  border-color: #cbdcf3;
  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(59,130,246,.08),
      transparent 40%
    ),
    #f8fafc;
}

html[data-theme="light"]
.public-dashboard .public-next-empty-copy strong {
  color: #0f172a;
}

html[data-theme="light"]
.public-dashboard .public-next-empty-copy small {
  color: #64748b;
}

@media (max-width: 560px) {

  .public-dashboard .public-next-empty {
    min-height: 112px;
    padding: 16px;
  }

}

/* =========================================================
   LIGAYA PUBLIC HERO PREMIUM V2
   Portada principal del espectador
   ========================================================= */

.public-dashboard .public-hero-pro {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 218px;
  padding: 24px 22px 22px;

  border:
    1px solid rgba(96,165,250,.30);
  border-radius: 27px;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(34,211,238,.24),
      transparent 31%
    ),
    radial-gradient(
      circle at 10% 105%,
      rgba(80,105,255,.42),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      #304fdb 0%,
      #172b86 46%,
      #07152f 100%
    );

  box-shadow:
    0 20px 45px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.10);
}


/* Líneas deportivas decorativas */

.public-dashboard .public-hero-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  opacity: .42;

  background:
    linear-gradient(
      115deg,
      transparent 0 58%,
      rgba(255,255,255,.045) 58% 58.7%,
      transparent 58.7% 100%
    ),
    linear-gradient(
      115deg,
      transparent 0 72%,
      rgba(255,255,255,.035) 72% 72.6%,
      transparent 72.6% 100%
    );
}


.public-dashboard .public-hero-pro::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -58px;
  bottom: -72px;

  width: 190px;
  height: 190px;

  border:
    26px solid rgba(255,255,255,.038);
  border-radius: 50%;

  box-shadow:
    0 0 0 26px rgba(255,255,255,.018);
  pointer-events: none;
}


.public-dashboard .public-hero-content {
  position: relative;
  z-index: 2;
  max-width: 310px;
}


/* Marca superior */

.public-dashboard .public-hero-content > span {
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border:
    1px solid rgba(255,255,255,.10);
  border-radius: 999px;

  background:
    rgba(255,255,255,.075);

  color: #eaf2ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;

  backdrop-filter: blur(8px);
}


.public-dashboard .public-hero-content h1 {
  margin: 14px 0 7px;

  color: #ffffff;
  font-size: clamp(32px, 8vw, 42px);
  line-height: .98;
  font-weight: 1000;
  letter-spacing: -.035em;

  text-shadow:
    0 3px 16px rgba(0,0,0,.16);
}


.public-dashboard .public-hero-content p {
  max-width: 260px;
  margin: 0;

  color: rgba(241,245,249,.92);
  font-size: 13px;
  line-height: 1.48;
  font-weight: 600;
}


/* Estado + fecha */

.public-dashboard .public-hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  margin-top: 20px;
}


.public-dashboard .public-hero-status b {
  min-height: 34px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border:
    1px solid rgba(255,255,255,.14);
  border-radius: 999px;

  background:
    rgba(255,255,255,.13);

  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .015em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(10px);
}


.public-dashboard .public-hero-status small {
  min-height: 34px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;

  border:
    1px solid rgba(255,255,255,.11);
  border-radius: 999px;

  background:
    rgba(8,20,53,.26);

  color: #e9f1ff;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;

  backdrop-filter: blur(10px);
}


/* Pequeño brillo lateral */

.public-dashboard .public-hero-content::after {
  content: "";
  position: absolute;
  left: -22px;
  top: 37px;

  width: 3px;
  height: 58px;

  border-radius: 0 5px 5px 0;

  background:
    linear-gradient(
      180deg,
      #6ea1ff,
      rgba(34,211,238,.45)
    );

  box-shadow:
    0 0 15px rgba(96,165,250,.46);
}


@media (max-width: 560px) {

  .public-dashboard .public-hero-pro {
    min-height: 210px;
    padding: 21px 20px;
    border-radius: 25px;
  }

  .public-dashboard .public-hero-content h1 {
    font-size: 34px;
  }

  .public-dashboard .public-hero-status {
    margin-top: 18px;
  }

  .public-dashboard .public-hero-status b,
  .public-dashboard .public-hero-status small {
    min-height: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }

}

/* =========================================================
   LIGAYA PUBLIC HERO GAP FIX V1
   Acerca el hero a la cabecera principal
   ========================================================= */

.public-dashboard {
  padding-top: 2px;
}

@media (max-width: 560px) {

  .public-dashboard {
    padding-top: 0;
  }

}

/* =========================================================
   LIGAYA PUBLIC HERO SPORTS COVER V3
   ========================================================= */

.public-dashboard .public-hero-content-v3 {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  min-height: 166px;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    92px;
  grid-template-areas:
    "kicker sport"
    "copy sport"
    "meta meta";
  column-gap: 14px;
  align-items: center;
}


.public-dashboard .public-hero-content-v3::after {
  display: none;
}


.public-dashboard .public-hero-kicker-v3 {
  grid-area: kicker;
  align-self: start;

  width: fit-content;
  min-height: 28px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;

  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}


.public-dashboard .public-hero-kicker-v3 > span {
  font-size: 12px;
}


.public-dashboard .public-hero-kicker-v3 div {
  display: flex;
  align-items: center;
  gap: 6px;
}


.public-dashboard .public-hero-kicker-v3 strong {
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
}


.public-dashboard .public-hero-kicker-v3 small {
  color: #b9c9e8;
  font-size: 8px;
  font-weight: 700;
}


.public-dashboard .public-hero-copy-v3 {
  grid-area: copy;
  align-self: center;
}


.public-dashboard .public-hero-copy-v3 h1 {
  margin: 11px 0 7px;

  color: #ffffff;
  font-size: 33px;
  line-height: .98;
  font-weight: 1000;
  letter-spacing: -.035em;
}


.public-dashboard .public-hero-copy-v3 p {
  max-width: 250px;
  margin: 0;

  color: #dfe8fa;
  font-size: 11px;
  line-height: 1.48;
  font-weight: 650;
}


.public-dashboard .public-hero-sportmark {
  grid-area: sport;

  display: grid;
  place-items: center;
  align-self: center;
}


.public-dashboard .public-hero-sportmark > div {
  position: relative;

  width: 82px;
  height: 82px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255,255,255,.16),
      rgba(255,255,255,.045) 54%,
      rgba(255,255,255,.02)
    );

  box-shadow:
    0 15px 35px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(8px);
}


.public-dashboard .public-hero-sportmark > div::before {
  content: "";
  position: absolute;
  inset: 8px;

  border:
    1px solid rgba(255,255,255,.08);
  border-radius: 50%;
}


.public-dashboard .public-hero-sportmark span {
  position: relative;
  z-index: 1;

  font-size: 38px;
  filter:
    drop-shadow(
      0 8px 10px
      rgba(0,0,0,.20)
    );
}


.public-dashboard .public-hero-meta-v3 {
  grid-area: meta;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 16px;
  padding-top: 12px;

  border-top:
    1px solid rgba(255,255,255,.10);
}


.public-dashboard .public-hero-state-v3,
.public-dashboard .public-hero-date-v3 {
  min-height: 31px;
  padding: 0 11px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  border-radius: 999px;
}


.public-dashboard .public-hero-state-v3 {
  border:
    1px solid rgba(255,255,255,.13);

  background:
    rgba(255,255,255,.10);

  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .025em;
}


.public-dashboard .public-hero-state-v3 i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}


.public-dashboard .public-hero-state-v3.is-active i {
  background: #22c55e;
  box-shadow:
    0 0 0 4px rgba(34,197,94,.13);
}


.public-dashboard .public-hero-state-v3.is-finished i {
  background: #cbd5e1;
}


.public-dashboard .public-hero-date-v3 {
  border:
    1px solid rgba(255,255,255,.09);

  background:
    rgba(5,15,40,.27);

  color: #e6eeff;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}


.public-dashboard .public-hero-date-v3 b {
  font-size: 10px;
}


@media (max-width: 560px) {

  .public-dashboard .public-hero-pro {
    min-height: 214px;
    padding: 18px 18px 16px;
  }

  .public-dashboard .public-hero-content-v3 {
    min-height: 178px;
    grid-template-columns:
      minmax(0, 1fr)
      78px;
    column-gap: 9px;
  }

  .public-dashboard .public-hero-sportmark > div {
    width: 70px;
    height: 70px;
  }

  .public-dashboard .public-hero-sportmark span {
    font-size: 32px;
  }

  .public-dashboard .public-hero-copy-v3 h1 {
    font-size: 31px;
  }

  .public-dashboard .public-hero-copy-v3 p {
    max-width: 235px;
    font-size: 10.5px;
  }

  .public-dashboard .public-hero-kicker-v3 small {
    display: none;
  }

}

/* =========================================================
   LIGAYA PUBLIC HERO LOGO OFICIAL V2
   ========================================================= */


/* Logo pequeño superior */

.public-dashboard .public-hero-brandmark-v3 {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  padding: 0;
  overflow: hidden;

  border-radius: 6px;
  background: transparent;
}

.public-dashboard .public-hero-brandmark-v3 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}


/* Logo principal derecho */

.public-dashboard
.public-hero-sportmark
> .public-hero-logo-shell-v3 {
  position: relative;

  width: 96px;
  height: 96px;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.public-dashboard
.public-hero-sportmark
> .public-hero-logo-shell-v3::before {
  content: "";

  position: absolute;
  inset: 7px;

  border: 0;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(69,116,255,.30) 0%,
      rgba(69,116,255,.13) 42%,
      transparent 72%
    );

  filter: blur(4px);
}

.public-dashboard .public-hero-logo-v3 {
  position: relative;
  z-index: 2;

  width: 92px;
  height: 92px;

  display: block;
  object-fit: contain;

  filter:
    drop-shadow(
      0 12px 14px
      rgba(0,0,0,.32)
    );
}


@media (max-width: 560px) {

  .public-dashboard
  .public-hero-sportmark
  > .public-hero-logo-shell-v3 {
    width: 80px;
    height: 80px;
  }

  .public-dashboard .public-hero-logo-v3 {
    width: 78px;
    height: 78px;
  }

}

/* =========================================================
   LIGAYA PUBLIC HERO LOGO POSITION V3
   ========================================================= */

.public-dashboard .public-hero-sportmark {
  transform: translateY(4px);
}

.public-dashboard
.public-hero-sportmark
> .public-hero-logo-shell-v3 {
  width: 104px;
  height: 104px;
}

.public-dashboard .public-hero-logo-v3 {
  width: 100px;
  height: 100px;
}

@media (max-width: 560px) {

  .public-dashboard .public-hero-sportmark {
    transform:
      translate(-2px, 4px);
  }

  .public-dashboard
  .public-hero-sportmark
  > .public-hero-logo-shell-v3 {
    width: 88px;
    height: 88px;
  }

  .public-dashboard .public-hero-logo-v3 {
    width: 86px;
    height: 86px;
  }

}

/* =========================================================
   LIGAYA PUBLIC KPI PREMIUM V2
   ========================================================= */

.public-dashboard .public-kpi-grid {
  gap: 8px;
}

.public-dashboard .public-kpi-card {
  position: relative;
  min-height: 94px;
  padding: 11px 7px 10px;

  overflow: hidden;

  border:
    1px solid rgba(148,163,184,.14);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(17,38,61,.98),
      rgba(8,23,40,.98)
    );

  box-shadow:
    0 10px 24px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.035);

  isolation: isolate;
}


/* Brillo superior */

.public-dashboard .public-kpi-card::before {
  content: "";

  position: absolute;
  z-index: -1;

  width: 72px;
  height: 72px;
  top: -34px;
  right: -24px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(91,140,255,.26),
      transparent 68%
    );
}


/* Linea de acento */

.public-dashboard .public-kpi-card::after {
  content: "";

  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;

  height: 2px;
  border-radius: 999px 999px 0 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(91,140,255,.85),
      transparent
    );
}


/* Icono */

.public-dashboard .public-kpi-card > span {
  width: 29px;
  height: 29px;

  margin: 0 0 6px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(116,156,255,.18);
  border-radius: 10px;

  background:
    rgba(62,101,190,.12);

  font-size: 15px;
  line-height: 1;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045);
}


/* Numero */

.public-dashboard .public-kpi-card > strong {
  margin: 0;

  color: #79a4ff;

  font-size: 27px;
  line-height: .96;
  font-weight: 1000;
  letter-spacing: -.035em;
}


/* Etiqueta */

.public-dashboard .public-kpi-card > small {
  margin-top: 6px;

  color: #aebfd3;

  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .015em;
}


/* Equipos */

.public-dashboard .public-kpi-card:nth-child(1)::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      #5b8cff,
      transparent
    );
}


/* Jugadores */

.public-dashboard .public-kpi-card:nth-child(2)::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      #8b7cff,
      transparent
    );
}


/* Partidos */

.public-dashboard .public-kpi-card:nth-child(3)::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      #3bc7dd,
      transparent
    );
}


/* En vivo */

.public-dashboard .public-kpi-card:nth-child(4)::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      #ff6b7a,
      transparent
    );
}


/* Modo claro */

html[data-theme="light"]
.public-dashboard .public-kpi-card {
  border-color: #dce6f2;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7faff
    );

  box-shadow:
    0 8px 22px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.8);
}

html[data-theme="light"]
.public-dashboard .public-kpi-card > span {
  border-color: #dce7f7;
  background: #edf4ff;
}

html[data-theme="light"]
.public-dashboard .public-kpi-card > strong {
  color: #336ee8;
}

html[data-theme="light"]
.public-dashboard .public-kpi-card > small {
  color: #64748b;
}


@media (max-width: 560px) {

  .public-dashboard .public-kpi-grid {
    gap: 7px;
  }

  .public-dashboard .public-kpi-card {
    min-height: 91px;
    padding: 10px 5px 9px;
    border-radius: 16px;
  }

  .public-dashboard .public-kpi-card > span {
    width: 27px;
    height: 27px;
    margin-bottom: 6px;
    font-size: 14px;
  }

  .public-dashboard .public-kpi-card > strong {
    font-size: 25px;
  }

  .public-dashboard .public-kpi-card > small {
    font-size: 8.5px;
  }

}



/* =========================================================
   LIGAYA PUBLIC KPI ICON CONTRAST FIX
   ========================================================= */

.public-dashboard .public-kpi-card > span{
  color:#ffffff;
  text-shadow:0 1px 10px rgba(255,255,255,.12);
  filter:saturate(1.25) brightness(1.12);
}

/* KPI 1: Equipos */
.public-dashboard .public-kpi-card:nth-child(1) > span{
  background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(37,99,235,.16));
  border-color:rgba(96,165,250,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 16px rgba(37,99,235,.18);
}

/* KPI 2: Jugadores */
.public-dashboard .public-kpi-card:nth-child(2) > span{
  background:linear-gradient(180deg, rgba(99,102,241,.24), rgba(79,70,229,.16));
  border-color:rgba(129,140,248,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 16px rgba(79,70,229,.18);
}

/* KPI 3: Partidos */
.public-dashboard .public-kpi-card:nth-child(3) > span{
  background:linear-gradient(180deg, rgba(6,182,212,.24), rgba(8,145,178,.16));
  border-color:rgba(34,211,238,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 16px rgba(8,145,178,.18);
}

/* KPI 4: En vivo */
.public-dashboard .public-kpi-card:nth-child(4) > span{
  background:linear-gradient(180deg, rgba(249,115,22,.24), rgba(234,88,12,.16));
  border-color:rgba(251,146,60,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 16px rgba(234,88,12,.20);
}

/* Modo claro */
html[data-theme="light"] .public-dashboard .public-kpi-card > span{
  color:#1e293b;
  text-shadow:none;
  filter:saturate(1.08) brightness(1.02);
}

html[data-theme="light"] .public-dashboard .public-kpi-card:nth-child(1) > span{
  background:linear-gradient(180deg, #eaf2ff, #dbeafe);
  border-color:#bfd6ff;
}

html[data-theme="light"] .public-dashboard .public-kpi-card:nth-child(2) > span{
  background:linear-gradient(180deg, #eeecff, #e0e7ff);
  border-color:#cfd2ff;
}

html[data-theme="light"] .public-dashboard .public-kpi-card:nth-child(3) > span{
  background:linear-gradient(180deg, #e8fbff, #cffafe);
  border-color:#b7eff7;
}

html[data-theme="light"] .public-dashboard .public-kpi-card:nth-child(4) > span{
  background:linear-gradient(180deg, #fff1e8, #ffedd5);
  border-color:#ffd2b0;
}
/* =========================================================
   LIGAYA PUBLIC KPI SVG STYLE V1
   ========================================================= */

.public-dashboard .public-kpi-card > .public-kpi-svg {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  margin: 0 0 6px;

  border-radius: 10px;
}

.public-dashboard .public-kpi-svg svg {
  width: 17px;
  height: 17px;

  display: block;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Equipos */

.public-dashboard .public-kpi-svg-equipos {
  color: #79a8ff !important;
}


/* Jugadores */

.public-dashboard .public-kpi-svg-jugadores {
  color: #a69aff !important;
}


/* Partidos */

.public-dashboard .public-kpi-svg-partidos {
  color: #54d9ef !important;
}


/* En vivo */

.public-dashboard .public-kpi-svg-live {
  color: #ff9070 !important;
}


/* Si hay partido en vivo, enfatizar transmisión */

.public-dashboard .public-kpi-card:last-child
.public-kpi-svg-live {
  position: relative;
}

@media (max-width: 560px) {

  .public-dashboard .public-kpi-card > .public-kpi-svg {
    width: 28px;
    height: 28px;
  }

  .public-dashboard .public-kpi-svg svg {
    width: 16px;
    height: 16px;
  }

}
/* =========================================================
   LIGAYA PUBLIC PROXIMOS PREMIUM V3
   ========================================================= */


/* Contenedor general */

.public-dashboard .public-next-card {
  position: relative;
  overflow: hidden;
}


/* Header */

.public-dashboard .public-next-header {
  margin-bottom: 14px;
}

.public-dashboard .public-next-header h3 {
  letter-spacing: -.02em;
}

.public-dashboard .public-next-count {
  flex: 0 0 auto;

  min-height: 34px;
  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(96,165,250,.24);
  border-radius: 999px;

  background:
    rgba(37,99,235,.10);

  color: #8db3ff;

  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}


/* Carrusel */

.public-dashboard .public-next-scroller {
  gap: 11px;
  padding: 2px 24px 7px 1px;
  scroll-padding-left: 1px;
}


/* Tarjeta */

.public-dashboard .public-next-match-card-compact {
  position: relative;

  flex-basis: 86%;

  padding: 12px 12px 11px;

  border:
    1px solid rgba(125,157,199,.15);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(19,43,69,.96),
      rgba(9,26,44,.98)
    );

  box-shadow:
    0 12px 28px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.public-dashboard
.public-next-match-card-compact:first-child {
  border-color:
    rgba(91,140,255,.24);
}


/* Franja superior */

.public-dashboard .public-next-mini-top {
  margin-bottom: 12px;
}

.public-dashboard .public-next-category,
.public-dashboard .public-next-round {
  min-height: 22px;
  padding: 0 8px;
  font-size: 7.5px;
}


/* Hora */

.public-dashboard .public-next-mini-time {
  min-height: 27px;
  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(91,140,255,.16);
  border-radius: 9px;

  background:
    rgba(59,130,246,.08);

  color: #8eb2ff;

  font-size: 13px;
  font-weight: 950;
}


/* Equipos */

.public-dashboard .public-next-mini-row {
  grid-template-columns:
    minmax(0, 1fr)
    50px
    minmax(0, 1fr);

  gap: 7px;
  margin-bottom: 11px;
}

.public-dashboard .public-next-mini-team strong {
  margin-top: 8px;

  color: #f8fafc;

  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: -.01em;
}


/* VS mas limpio y menos pesado */

.public-dashboard .public-next-mini-vs {
  width: 48px;
  height: 48px;

  justify-self: center;

  border:
    1px solid rgba(126,156,255,.28);
  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(82,115,255,.95),
      rgba(49,77,220,.95)
    );

  box-shadow:
    0 8px 18px rgba(40,72,220,.20),
    inset 0 1px 0 rgba(255,255,255,.16);

  color: #ffffff;

  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -.03em;
}


/* Pie */

.public-dashboard .public-next-mini-foot {
  padding-top: 9px;
}

.public-dashboard .public-next-mini-foot span {
  position: relative;

  min-height: 23px;
  padding: 0 9px 0 19px;

  background:
    rgba(59,130,246,.09);

  color: #89adf8;
}

.public-dashboard .public-next-mini-foot span::before {
  content: "";

  position: absolute;
  left: 8px;
  top: 50%;

  width: 5px;
  height: 5px;

  transform: translateY(-50%);

  border-radius: 50%;
  background: #5b8cff;

  box-shadow:
    0 0 0 3px rgba(91,140,255,.11);
}

.public-dashboard .public-next-mini-foot small {
  color: #7890ac;
  font-size: 8.5px;
}


/* Modo claro */

html[data-theme="light"]
.public-dashboard .public-next-match-card-compact {
  border-color: #dbe6f2;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7faff
    );

  box-shadow:
    0 10px 24px rgba(15,23,42,.07);
}

html[data-theme="light"]
.public-dashboard .public-next-mini-team strong {
  color: #0f172a;
}

html[data-theme="light"]
.public-dashboard .public-next-mini-time {
  border-color: #d9e6ff;
  background: #eef4ff;
  color: #336ee8;
}


@media (max-width: 560px) {

  .public-dashboard .public-next-match-card-compact {
    flex-basis: 87%;
    padding: 11px;
  }

  .public-dashboard .public-next-mini-row {
    grid-template-columns:
      minmax(0, 1fr)
      46px
      minmax(0, 1fr);
  }

  .public-dashboard .public-next-mini-vs {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }

}

/* =========================================================
   LIGAYA PUBLIC MODAL CATEGORIA STYLE V3
   ========================================================= */

.public-category-modal-overlay {
  z-index: 10020;
  padding: 18px;
  backdrop-filter: blur(11px);
  background: rgba(2,10,22,.70);
}

.public-category-modal {
  width: min(100%, 390px);
  max-height: min(78vh, 620px);
  overflow: hidden;
  border:
    1px solid rgba(120,153,198,.18);
  border-radius: 26px;
  background:
    linear-gradient(
      165deg,
      #10263e 0%,
      #081827 100%
    );
  box-shadow:
    0 28px 70px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.public-category-modal-handle {
  width: 38px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: rgba(148,163,184,.28);
}

.public-category-modal-header {
  padding: 16px 18px 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.public-category-modal-heading {
  min-width: 0;
}

.public-category-modal-heading > span {
  display: block;
  margin-bottom: 5px;
  color: #76a4ff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .13em;
}

.public-category-modal-heading h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 25px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.035em;
}

.public-category-modal-heading p {
  margin: 7px 0 0;
  color: #8da3bd;
  font-size: 10px;
  font-weight: 700;
}

.public-category-modal-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border:
    1px solid rgba(148,163,184,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  color: #cbd5e1;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.public-category-modal-divider {
  height: 1px;
  margin: 0 18px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(148,163,184,.17),
      transparent
    );
}

.public-category-modal-body {
  max-height: 49vh;
  padding: 13px 18px 10px;
  display: grid;
  gap: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.public-category-modal-team {
  width: 100%;
  min-width: 0;
  min-height: 66px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns:
    48px
    minmax(0,1fr)
    28px;
  align-items: center;
  gap: 11px;
  border:
    1px solid rgba(125,157,199,.14);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.016)
    );
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.public-category-modal-team:hover {
  border-color:
    rgba(91,140,255,.30);
  background:
    rgba(72,111,200,.08);
}

.public-category-modal-team:active {
  transform: scale(.985);
}

.public-category-modal-logo {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border:
    2px solid rgba(255,255,255,.90);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 7px 17px rgba(0,0,0,.22);
}

.public-category-modal-logo img,
.public-category-modal-logo .team-flag-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.public-category-modal-copy {
  min-width: 0;
}

.public-category-modal-copy strong {
  display: block;
  overflow: hidden;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-category-modal-copy small {
  display: block;
  margin-top: 5px;
  color: #8196b0;
  font-size: 9px;
  font-weight: 750;
}

.public-category-modal-arrow {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(59,130,246,.10);
  color: #7da7ff;
  font-size: 20px;
  line-height: 1;
}

.public-category-modal-hint {
  padding: 4px 18px 16px;
  color: #617995;
  font-size: 8.5px;
  font-weight: 700;
  text-align: center;
}

.public-category-modal-empty {
  padding: 28px 18px;
  border:
    1px dashed rgba(148,163,184,.16);
  border-radius: 18px;
  text-align: center;
}

.public-category-modal-empty-icon {
  margin-bottom: 8px;
  color: #729df8;
  font-size: 24px;
}

.public-category-modal-empty strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
}

.public-category-modal-empty small {
  display: block;
  margin-top: 6px;
  color: #8094ae;
  font-size: 10px;
  line-height: 1.4;
}


/* Modo claro */

html[data-theme="light"]
.public-category-modal {
  border-color: #dbe5f0;
  background:
    linear-gradient(
      165deg,
      #ffffff,
      #f5f8fc
    );
}

html[data-theme="light"]
.public-category-modal-heading h2,
html[data-theme="light"]
.public-category-modal-copy strong,
html[data-theme="light"]
.public-category-modal-empty strong {
  color: #0f172a;
}

html[data-theme="light"]
.public-category-modal-team {
  border-color: #dce6f2;
  background: #ffffff;
}


@media (max-width: 560px) {

  .public-category-modal-overlay {
    align-items: flex-end;
    padding: 12px;
  }

  .public-category-modal {
    width: 100%;
    max-height: 80vh;
    border-radius: 25px;
  }

}

/* =========================================================
   LIGAYA PUBLIC EQUIPOS PREMIUM V2
   ========================================================= */


/* Header */

.public-dashboard .public-teams-header {
  margin-bottom: 14px;
}

.public-dashboard .public-teams-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.public-dashboard .public-teams-title-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(96,165,250,.22);
  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(59,130,246,.17),
      rgba(37,99,235,.08)
    );

  color: #78a6ff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

.public-dashboard .public-teams-title-icon svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Carrusel */

.public-dashboard .public-category-teams-scroller {
  gap: 11px;
  padding: 2px 24px 7px 1px;
}


/* Tarjeta de categoria */

.public-dashboard .public-category-team-summary {
  position: relative;

  flex: 0 0 248px;
  min-height: 156px;

  padding: 15px;

  overflow: hidden;

  border:
    1px solid rgba(125,157,199,.15);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(20,46,73,.98),
      rgba(9,27,45,.98)
    );

  box-shadow:
    0 12px 26px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    transform .16s ease,
    border-color .16s ease;
}

.public-dashboard
.public-category-team-summary::before {
  content: "";

  position: absolute;
  top: -55px;
  right: -45px;

  width: 125px;
  height: 125px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(70,113,255,.18),
      transparent 68%
    );

  pointer-events: none;
}

.public-dashboard
.public-category-team-summary:hover {
  border-color:
    rgba(91,140,255,.30);
}

.public-dashboard
.public-category-team-summary:active {
  transform: scale(.985);
}


/* Cabecera interna */

.public-dashboard
.public-category-team-head {
  position: relative;
  z-index: 1;
}

.public-dashboard
.public-category-team-head span {
  color: #6f91b9;
  font-size: 7.5px;
  letter-spacing: .14em;
}

.public-dashboard
.public-category-team-head strong {
  margin-top: 4px;

  color: #f8fafc;

  font-size: 18px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.02em;
}

.public-dashboard
.public-category-team-head small {
  min-height: 25px;
  padding: 0 9px;

  display: inline-flex;
  align-items: center;

  border:
    1px solid rgba(96,165,250,.13);
  border-radius: 999px;

  background:
    rgba(59,130,246,.10);

  color: #83aaff;

  font-size: 8.5px;
  font-weight: 900;
}


/* Logos */

.public-dashboard
.public-category-team-logos {
  position: relative;
  z-index: 1;

  min-height: 53px;
  margin-top: 14px;
}

.public-dashboard
.public-category-team-logo,
.public-dashboard
.public-category-team-more {
  width: 46px;
  height: 46px;

  margin-left: -8px;

  border-width: 3px;
  border-color: #102a45;

  box-shadow:
    0 6px 16px rgba(0,0,0,.23);
}

.public-dashboard
.public-category-team-logo:first-child {
  margin-left: 0;
}

.public-dashboard
.public-category-team-more {
  background:
    linear-gradient(
      145deg,
      #234d7c,
      #173757
    );

  color: #b7ccff;
}


/* Pie / accion */

.public-dashboard
.public-category-team-foot {
  position: relative;
  z-index: 1;

  margin-top: 12px;
  padding-top: 10px;

  color: #88adff;

  font-size: 9.5px;
  font-weight: 900;
}

.public-dashboard
.public-category-team-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.public-dashboard
.public-category-team-foot b {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(96,165,250,.16);
  border-radius: 9px;

  background:
    rgba(59,130,246,.09);

  color: #82aaff;

  font-size: 15px;
  line-height: 1;
}


/* Modo claro */

html[data-theme="light"]
.public-dashboard
.public-category-team-summary {
  border-color: #dce6f2;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6f9fd
    );

  box-shadow:
    0 10px 24px rgba(15,23,42,.06);
}

html[data-theme="light"]
.public-dashboard
.public-category-team-head strong {
  color: #0f172a;
}

html[data-theme="light"]
.public-dashboard
.public-category-team-logo,
html[data-theme="light"]
.public-dashboard
.public-category-team-more {
  border-color: #f7faff;
}


@media (max-width: 560px) {

  .public-dashboard
  .public-category-team-summary {
    flex-basis: 83%;
    min-height: 152px;
  }

  .public-dashboard
  .public-teams-title-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

}

/* =========================================================
   LIGAYA PUBLIC MODAL CLASIFICACION STYLE V1
   ========================================================= */

.public-ranking-modal-overlay {
  z-index: 10030;
  padding: 18px;
  backdrop-filter: blur(11px);
  background: rgba(2,10,22,.72);
}

.public-ranking-modal {
  width: min(100%, 400px);
  max-height: min(80vh, 650px);
  overflow: hidden;

  border:
    1px solid rgba(120,153,198,.18);
  border-radius: 26px;

  background:
    linear-gradient(
      165deg,
      #10263e 0%,
      #081827 100%
    );

  box-shadow:
    0 28px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.public-ranking-modal-handle {
  width: 38px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: rgba(148,163,184,.28);
}

.public-ranking-modal-header {
  padding: 16px 18px 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.public-ranking-modal-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.public-ranking-modal-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(250,204,21,.20);
  border-radius: 13px;

  background:
    rgba(245,158,11,.10);

  color: #f6c453;
}

.public-ranking-modal-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-ranking-modal-title span {
  display: block;
  margin-bottom: 3px;

  color: #edbd55;

  font-size: 7.5px;
  font-weight: 950;
  letter-spacing: .13em;
}

.public-ranking-modal-title h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 23px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.03em;
}

.public-ranking-modal-title p {
  margin: 5px 0 0;
  color: #879cb7;
  font-size: 9px;
  font-weight: 700;
}

.public-ranking-modal-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(148,163,184,.14);
  border-radius: 11px;

  background: rgba(255,255,255,.045);

  color: #cbd5e1;
  font-size: 21px;
}

.public-ranking-modal-divider {
  height: 1px;
  margin: 0 18px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(148,163,184,.17),
      transparent
    );
}

.public-ranking-modal-columns {
  padding: 12px 18px 5px;

  display: grid;
  grid-template-columns:
    38px
    minmax(0,1fr)
    52px;
  gap: 9px;

  color: #617995;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .10em;
}

.public-ranking-modal-columns span:last-child {
  text-align: right;
}

.public-ranking-modal-body {
  max-height: 50vh;
  padding: 5px 18px 10px;

  display: grid;
  gap: 8px;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.public-ranking-modal-row {
  min-height: 62px;
  padding: 9px 10px;

  display: grid;
  grid-template-columns:
    38px
    minmax(0,1fr)
    52px;
  align-items: center;
  gap: 9px;

  border:
    1px solid rgba(125,157,199,.13);
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.015)
    );
}

.public-ranking-modal-row.is-first {
  border-color:
    rgba(245,190,70,.23);

  background:
    linear-gradient(
      145deg,
      rgba(245,158,11,.085),
      rgba(255,255,255,.015)
    );
}

.public-ranking-modal-position {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: rgba(91,140,255,.10);
  color: #86adff;

  font-size: 12px;
  font-weight: 1000;
}

.public-ranking-modal-position.pos-1 {
  background: rgba(245,158,11,.16);
  color: #f8c45c;
}

.public-ranking-modal-position.pos-2 {
  background: rgba(203,213,225,.11);
  color: #cbd5e1;
}

.public-ranking-modal-position.pos-3 {
  background: rgba(180,104,55,.13);
  color: #d89566;
}

.public-ranking-modal-team {
  min-width: 0;
}

.public-ranking-modal-team strong {
  display: block;
  overflow: hidden;

  color: #f8fafc;

  font-size: 12.5px;
  font-weight: 900;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-ranking-modal-team small {
  display: block;
  margin-top: 5px;

  color: #7890aa;

  font-size: 8.5px;
  font-weight: 700;
}

.public-ranking-modal-points {
  text-align: right;
}

.public-ranking-modal-points strong {
  display: inline;
  color: #79a3ff;
  font-size: 18px;
  font-weight: 1000;
}

.public-ranking-modal-points span {
  margin-left: 2px;
  color: #7690b0;
  font-size: 7.5px;
  font-weight: 850;
}

.public-ranking-modal-hint {
  padding: 4px 18px 16px;
  color: #607894;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
}

.public-ranking-modal-empty {
  padding: 30px 18px;
  text-align: center;

  border:
    1px dashed rgba(148,163,184,.16);
  border-radius: 18px;
}

.public-ranking-modal-empty-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 10px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: rgba(59,130,246,.10);
  color: #7da7ff;

  font-size: 14px;
  font-weight: 1000;
}

.public-ranking-modal-empty strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
}

.public-ranking-modal-empty small {
  display: block;
  margin-top: 6px;
  color: #8094ae;
  font-size: 9px;
}


/* Modo claro */

html[data-theme="light"]
.public-ranking-modal {
  border-color: #dbe5f0;
  background:
    linear-gradient(
      165deg,
      #ffffff,
      #f5f8fc
    );
}

html[data-theme="light"]
.public-ranking-modal-title h2,
html[data-theme="light"]
.public-ranking-modal-team strong,
html[data-theme="light"]
.public-ranking-modal-empty strong {
  color: #0f172a;
}

html[data-theme="light"]
.public-ranking-modal-row {
  border-color: #dce6f2;
  background: #ffffff;
}


@media (max-width: 560px) {

  .public-ranking-modal-overlay {
    align-items: flex-end;
    padding: 12px;
  }

  .public-ranking-modal {
    width: 100%;
    max-height: 82vh;
    border-radius: 25px;
  }

}

/* =========================================================
   LIGAYA PUBLIC RANKING TEAM LOGOS V1
   ========================================================= */

.public-ranking-modal-team {
  min-width: 0;

  display: grid;
  grid-template-columns:
    32px
    minmax(0,1fr);
  align-items: center;
  gap: 9px;
}

.public-ranking-modal-team-logo {
  width: 31px;
  height: 31px;

  overflow: hidden;

  border:
    2px solid rgba(255,255,255,.90);
  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 5px 12px rgba(0,0,0,.20);
}

.public-ranking-modal-team-logo img,
.public-ranking-modal-team-logo .team-flag-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  display: block;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 50% !important;
}

.public-ranking-modal-team-copy {
  min-width: 0;
}

.public-ranking-modal-team-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {

  .public-ranking-modal-team {
    grid-template-columns:
      30px
      minmax(0,1fr);
    gap: 8px;
  }

  .public-ranking-modal-team-logo {
    width: 29px;
    height: 29px;
  }

}

/* =========================================================
   LIGAYA PUBLIC LIDERES PREMIUM V2
   ========================================================= */


/* Titulo */

.public-dashboard .public-ranking-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.public-dashboard .public-ranking-title-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(245,190,70,.23);
  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(245,158,11,.16),
      rgba(245,158,11,.07)
    );

  color: #f5c65d;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

.public-dashboard .public-ranking-title-icon svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Boton Ver tabla */

.public-dashboard .public-top-header button {
  min-height: 36px;
  padding: 0 13px;

  border:
    1px solid rgba(96,165,250,.20);
  border-radius: 11px;

  background:
    rgba(59,130,246,.09);

  color: #84aaff;

  font-size: 10px;
  font-weight: 900;
}


/* Carrusel */

.public-dashboard .public-leaders-scroller {
  gap: 11px;
  padding: 2px 24px 7px 1px;
}


/* Tarjeta */

.public-dashboard .public-leader-card {
  position: relative;

  flex: 0 0 252px;
  min-height: 170px;

  padding: 15px;

  overflow: hidden;

  border:
    1px solid rgba(125,157,199,.15);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(20,46,73,.98),
      rgba(9,27,45,.98)
    );

  box-shadow:
    0 12px 27px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    transform .16s ease,
    border-color .16s ease;
}

.public-dashboard .public-leader-card::before {
  content: "";

  position: absolute;
  top: -60px;
  right: -45px;

  width: 135px;
  height: 135px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(245,158,11,.13),
      transparent 68%
    );

  pointer-events: none;
}

.public-dashboard .public-leader-card:hover {
  border-color:
    rgba(245,190,70,.26);
}

.public-dashboard .public-leader-card:active {
  transform: scale(.985);
}


/* Categoria */

.public-dashboard .public-leader-category {
  position: relative;
  z-index: 1;
}

.public-dashboard .public-leader-category span {
  color: #6f91b9;
  font-size: 7.5px;
  letter-spacing: .14em;
}

.public-dashboard .public-leader-category strong {
  margin-top: 4px;

  color: #f8fafc;

  font-size: 18px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.02em;
}


/* Lider */

.public-dashboard .public-leader-main {
  position: relative;
  z-index: 1;

  grid-template-columns:
    50px
    minmax(0,1fr)
    auto;

  gap: 10px;
  margin-top: 14px;
}


/* Logo del lider */

.public-dashboard .public-leader-logo {
  position: relative;

  width: 48px;
  height: 48px;

  overflow: visible;

  border:
    3px solid rgba(255,255,255,.94);
  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 7px 17px rgba(0,0,0,.23);
}

.public-dashboard .public-leader-logo img,
.public-dashboard .public-leader-logo .team-flag-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  display: block;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 50% !important;
}

.public-dashboard .public-leader-logo > span {
  position: absolute;
  right: -5px;
  bottom: -4px;

  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  border:
    2px solid #10243a;
  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #f6c658,
      #e99b26
    );

  color: #422800;

  font-size: 8px;
  font-weight: 1000;

  box-sizing: border-box;
}


/* Texto */

.public-dashboard .public-leader-info small {
  color: #d4a94e;
  font-size: 7.5px;
  letter-spacing: .10em;
}

.public-dashboard .public-leader-info strong {
  margin-top: 3px;

  color: #f8fafc;

  font-size: 13.5px;
  font-weight: 950;
}

.public-dashboard .public-leader-info span {
  margin-top: 4px;

  color: #8095af;

  font-size: 9px;
}


/* Puntos */

.public-dashboard .public-leader-main > b {
  padding: 7px 8px;

  display: inline-flex;
  align-items: baseline;
  gap: 3px;

  border:
    1px solid rgba(91,140,255,.13);
  border-radius: 10px;

  background:
    rgba(59,130,246,.07);

  color: #79a3ff;

  font-size: 20px;
  font-weight: 1000;
}

.public-dashboard .public-leader-main > b small {
  color: #7892b4;
  font-size: 7px;
  font-weight: 850;
}


/* Pie */

.public-dashboard .public-leader-foot {
  position: relative;
  z-index: 1;

  margin-top: 12px;
  padding-top: 10px;

  color: #88adff;

  font-size: 9.5px;
  font-weight: 900;
}

.public-dashboard .public-leader-foot b {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(96,165,250,.16);
  border-radius: 9px;

  background:
    rgba(59,130,246,.09);

  color: #82aaff;

  font-size: 15px;
  line-height: 1;
}


/* Light */

html[data-theme="light"]
.public-dashboard .public-leader-card {
  border-color: #dce6f2;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6f9fd
    );
}

html[data-theme="light"]
.public-dashboard .public-leader-category strong,
html[data-theme="light"]
.public-dashboard .public-leader-info strong {
  color: #0f172a;
}

html[data-theme="light"]
.public-dashboard .public-leader-logo > span {
  border-color: #ffffff;
}


@media (max-width: 560px) {

  .public-dashboard .public-leader-card {
    flex-basis: 83%;
    min-height: 168px;
  }

  .public-dashboard .public-ranking-title-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

}

/* =========================================================
   LIGAYA PUBLIC RESULTADOS PREMIUM V2
   ========================================================= */


/* Encabezado */

.public-dashboard .public-results-header {
  margin-bottom: 14px;
}

.public-dashboard .public-results-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.public-dashboard .public-results-title-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(34,211,238,.20);
  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(6,182,212,.14),
      rgba(14,116,144,.07)
    );

  color: #55d4e8;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

.public-dashboard .public-results-title-icon svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Lista */

.public-dashboard .public-results-list {
  gap: 10px;
}


/* Tarjeta de resultado */

.public-dashboard .public-result-item {
  position: relative;
  overflow: hidden;

  border:
    1px solid rgba(125,157,199,.14);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(19,43,69,.97),
      rgba(9,26,44,.98)
    );

  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.public-dashboard .public-result-item::before {
  content: "";

  position: absolute;
  top: -55px;
  right: -45px;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(46,190,210,.10),
      transparent 68%
    );

  pointer-events: none;
}


/* Categoria */

.public-dashboard .public-result-category {
  position: relative;
  z-index: 1;

  min-height: 23px;
  margin: 11px 0 0 12px;
  padding: 0 9px;

  border:
    1px solid rgba(96,165,250,.18);

  background:
    rgba(59,130,246,.10);

  color: #82a9ff;

  font-size: 7.5px;
  font-weight: 950;
  letter-spacing: .09em;
}


/* Partido */

.public-dashboard
.public-result-item .public-result-row {
  position: relative;
  z-index: 1;

  min-height: 112px;
  padding: 13px 11px 14px;

  grid-template-columns:
    minmax(0,1fr)
    76px
    minmax(0,1fr);

  gap: 9px;
}


/* Logos */

.public-dashboard .result-flag {
  width: 56px;
  height: 56px;
  margin-bottom: 7px;

  overflow: hidden;

  border:
    3px solid rgba(255,255,255,.94);
  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 7px 17px rgba(0,0,0,.22);
}

.public-dashboard .result-flag img,
.public-dashboard .result-flag .team-flag-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  display: block;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 50% !important;
}


/* Nombre */

.public-dashboard .result-team strong {
  max-width: 105px;
  min-height: auto;

  color: #f8fafc !important;

  font-size: 12px;
  line-height: 1.15;
  font-weight: 900;
}


/* Marcador */

.public-dashboard .result-score {
  width: 72px;
  min-width: 72px;
  min-height: 60px;
  padding: 7px 7px 6px;

  display: grid;
  grid-template-columns:
    1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 4px;

  border:
    1px solid rgba(91,140,255,.17);
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(61,91,190,.15),
      rgba(35,57,128,.07)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);

  box-sizing: border-box;
}

.public-dashboard .result-score b {
  color: #8fb2ff;
  font-size: 24px;
  line-height: 1;
  font-weight: 1000;
}

.public-dashboard .result-score span {
  color: #5f7694;
  font-size: 15px;
  font-weight: 900;
}

.public-dashboard .result-score::after {
  content: "FINAL";

  grid-column: 1 / -1;

  margin-top: 2px;

  color: #6d86a6;

  font-size: 6.5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .12em;
}


/* Light */

html[data-theme="light"]
.public-dashboard .public-result-item {
  border-color: #dce6f2;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7faff
    );

  box-shadow:
    0 9px 22px rgba(15,23,42,.06);
}

html[data-theme="light"]
.public-dashboard .result-team strong {
  color: #0f172a !important;
}

html[data-theme="light"]
.public-dashboard .result-score {
  border-color: #dce6ff;
  background: #f1f6ff;
}

html[data-theme="light"]
.public-dashboard .result-score b {
  color: #376ee8;
}


@media (max-width: 560px) {

  .public-dashboard
  .public-result-item .public-result-row {
    min-height: 108px;

    grid-template-columns:
      minmax(0,1fr)
      68px
      minmax(0,1fr);

    gap: 7px;
    padding: 12px 8px 13px;
  }

  .public-dashboard .result-flag {
    width: 52px;
    height: 52px;
  }

  .public-dashboard .result-score {
    width: 66px;
    min-width: 66px;
    min-height: 57px;
  }

  .public-dashboard .result-score b {
    font-size: 21px;
  }

  .public-dashboard .result-team strong {
    max-width: 92px;
    font-size: 11.5px;
  }

  .public-dashboard .public-results-title-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

}

/* =========================================================
   LIGAYA PUBLIC FINAL LAYOUT V1
   Ajuste final de espacio inferior del dashboard publico
   ========================================================= */

.public-dashboard {
  padding-bottom: 28px;
}

@media (max-width: 900px) {

  .public-dashboard {
    padding-bottom: 20px;
  }

}

@media (max-width: 560px) {

  .public-dashboard {
    padding-bottom: 18px;
  }

}

/* =========================================================
   LIGAYA PUBLIC LIGHT CONTRAST FINAL V1
   ========================================================= */

html[data-theme="light"]
.public-dashboard .public-category-team-foot,

html[data-theme="light"]
.public-dashboard .public-leader-foot {
  color: #376fe8;
}

html[data-theme="light"]
.public-dashboard .public-category-team-foot b,

html[data-theme="light"]
.public-dashboard .public-leader-foot b {
  border-color: #c9dcff;
  background: #edf4ff;
  color: #2864dd;
}

html[data-theme="light"]
.public-dashboard .public-top-header button {
  border-color: #c9dcff;
  background: #edf4ff;
  color: #2864dd;
}

html[data-theme="light"]
.public-dashboard .public-result-category,

html[data-theme="light"]
.public-dashboard .public-next-category {
  border-color: #c9dcff;
  background: #edf4ff;
  color: #316ddb;
}

html[data-theme="light"]
.public-dashboard .public-next-count {
  border-color: #c9dcff;
  background: #edf4ff;
  color: #316ddb;
}

html[data-theme="light"]
.public-dashboard .public-category-heading span,

html[data-theme="light"]
.public-dashboard .public-category-team-head span,

html[data-theme="light"]
.public-dashboard .public-leader-category span {
  color: #5377a7;
}

html[data-theme="light"]
.public-dashboard .public-next-header small,

html[data-theme="light"]
.public-dashboard .public-teams-header small,

html[data-theme="light"]
.public-dashboard .public-top-header small,

html[data-theme="light"]
.public-dashboard .public-results-header small {
  color: #64748b !important;
}

html[data-theme="light"]
.public-dashboard .public-leader-info span {
  color: #64748b;
}

html[data-theme="light"]
.public-dashboard .public-leader-info small {
  color: #b57508;
}

/* =========================================================
   LIGAYA FIXTURE MATCH CARD PREMIUM V2
   ========================================================= */

.fixture-page .match-card-pro {
  position: relative;
  overflow: hidden;

  padding: 14px 14px 16px;

  border:
    1px solid rgba(116, 151, 194, .18);

  border-left:
    1px solid rgba(116, 151, 194, .18);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 50% 72%,
      rgba(61, 91, 190, .09),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #0d2136,
      #091827
    );

  box-shadow:
    0 10px 24px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* =========================================================
   HEADER
   ========================================================= */

.fixture-page .match-pro-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;
}

.fixture-page .match-pro-header > div {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 8px;
}

.fixture-page .match-pro-header small {
  margin: 0;

  color: #7591b2;

  font-size: 7.5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
}

.fixture-page .match-pro-header strong {
  margin: 0;

  min-height: 29px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(91,140,255,.18);

  border-radius: 10px;

  background:
    rgba(59,130,246,.08);

  color: #8fb1ff;

  font-size: 14px;
  line-height: 1;
  font-weight: 1000;
}


/* =========================================================
   ESTADO
   ========================================================= */

.fixture-page .match-status {
  min-height: 27px;
  padding: 0 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(96,165,250,.20);

  border-radius: 999px;

  background:
    rgba(59,130,246,.08);

  color: #91b4ff;

  font-size: 7.5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .035em;
}

.fixture-page .match-status.en-vivo {
  border-color:
    rgba(248,113,113,.22);

  background:
    rgba(239,68,68,.09);

  color: #ff8d8d;
}

.fixture-page .match-status.finalizado {
  border-color:
    rgba(74,222,128,.20);

  background:
    rgba(34,197,94,.08);

  color: #6fd994;
}


/* =========================================================
   PARTIDO
   ========================================================= */

.fixture-page .match-pro-body {
  margin: 0;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    62px
    minmax(0,1fr);

  align-items: center;

  gap: 8px;
}


/* =========================================================
   EQUIPOS
   ========================================================= */

.fixture-page .match-team {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.fixture-page .match-flag {
  width: 64px;
  height: 64px;

  margin: 0 0 8px;

  padding: 0;

  overflow: hidden;

  display: block;

  border:
    3px solid rgba(255,255,255,.95);

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 8px 18px rgba(0,0,0,.24);

  box-sizing: border-box;
}

.fixture-page .match-flag img,
.fixture-page .match-flag .team-flag-img,
.fixture-page .match-pro-body .team-flag-img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  display: block;

  object-fit: cover !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 50% !important;

  box-shadow: none !important;
}

.fixture-page .match-team h3 {
  max-width: 110px;

  margin: 0;

  overflow: hidden;

  color: #f8fafc;

  font-size: 12.5px;
  line-height: 1.15;
  font-weight: 900;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   VS
   ========================================================= */

.fixture-page .match-vs {
  width: 56px;
  height: 56px;

  margin: 0 auto;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(96, 125, 255, .22);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #4f72ff,
      #3854ec
    );

  color: #ffffff;

  font-size: 14px;
  line-height: 1;
  font-weight: 1000;

  box-shadow:
    0 10px 22px rgba(45,76,220,.22);
}


/* =========================================================
   FOOTER OPERATIVO
   ========================================================= */

.fixture-page .match-pro-footer {
  margin-top: 13px;
}

.fixture-page .match-pro-footer:empty {
  display: none;
  margin: 0;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"]
.fixture-page .match-card-pro {
  border-color:
    #d7e3f1;

  background:
    radial-gradient(
      circle at 50% 72%,
      rgba(59,130,246,.065),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f7faff
    );

  box-shadow:
    0 9px 22px rgba(15,23,42,.06);
}

html[data-theme="light"]
.fixture-page .match-pro-header small {
  color: #647f9f;
}

html[data-theme="light"]
.fixture-page .match-pro-header strong {
  border-color: #cddcff;
  background: #edf4ff;
  color: #316ce5;
}

html[data-theme="light"]
.fixture-page .match-team h3 {
  color: #0f172a;
}

html[data-theme="light"]
.fixture-page .match-status {
  border-color: #c9dcff;
  background: #edf4ff;
  color: #2864dd;
}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width: 560px) {

  .fixture-page .match-card-pro {
    padding:
      13px 12px 15px;

    border-radius: 19px;
  }

  .fixture-page .match-pro-body {
    grid-template-columns:
      minmax(0,1fr)
      58px
      minmax(0,1fr);

    gap: 7px;
  }

  .fixture-page .match-flag {
    width: 60px;
    height: 60px;
  }

  .fixture-page .match-vs {
    width: 52px;
    height: 52px;

    border-radius: 17px;

    font-size: 13px;
  }

  .fixture-page .match-team h3 {
    max-width: 94px;

    font-size: 12px;
  }

}

/* =========================================================
   LIGAYA FIXTURE ROUND HEADER PREMIUM V1
   ========================================================= */

.fixture-page .round-block {
  gap: 9px;
}

.fixture-page .round-header {
  position: relative;

  padding: 10px 12px;

  overflow: hidden;

  border:
    1px solid rgba(112, 149, 195, .17);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 39, 64, .98),
      rgba(10, 27, 46, .98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

.fixture-page .round-header::after {
  content: "";

  position: absolute;
  top: -32px;
  right: -28px;

  width: 90px;
  height: 90px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(59,130,246,.10),
      transparent 68%
    );

  pointer-events: none;
}


/* TITULO */

.fixture-page .fixture-round-title {
  position: relative;
  z-index: 1;

  margin: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  color: #f8fafc;

  font-size: 14px;
  line-height: 1;
  font-weight: 950;
}


/* SVG */

.fixture-page .fixture-round-icon {
  flex: 0 0 27px;

  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(96,165,250,.18);

  border-radius: 9px;

  background:
    rgba(59,130,246,.09);

  color: #7fa8ff;
}

.fixture-page .fixture-round-icon svg {
  width: 14px;
  height: 14px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* FECHA + CANTIDAD */

.fixture-page .round-header p {
  position: relative;
  z-index: 1;

  margin:
    5px 0 0 35px;

  color: #829ab7;

  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 650;
}


/* LIGHT */

html[data-theme="light"]
.fixture-page .round-header {
  border-color: #d8e4f1;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6f9fd
    );

  box-shadow:
    0 6px 15px rgba(15,23,42,.045);
}

html[data-theme="light"]
.fixture-page .fixture-round-title {
  color: #0f172a;
}

html[data-theme="light"]
.fixture-page .fixture-round-icon {
  border-color: #d1e0ff;

  background: #edf4ff;

  color: #326ce3;
}

html[data-theme="light"]
.fixture-page .round-header p {
  color: #64748b;
}


/* MOVIL */

@media (max-width: 560px) {

  .fixture-page .round-header {
    padding: 9px 11px;

    border-radius: 15px;
  }

  .fixture-page .fixture-round-icon {
    width: 26px;
    height: 26px;

    flex-basis: 26px;
  }

  .fixture-page .round-header p {
    margin-left: 34px;
  }

}

/* =========================================================
   LIGAYA FIXTURE PHASE PREMIUM V1
   ========================================================= */

.fixture-page .fixture-phase {
  gap: 14px;
}


/* TARJETA */

.fixture-page .fixture-phase-header {
  position: relative;

  padding: 13px 14px;

  overflow: hidden;

  border:
    1px solid rgba(112,149,195,.18) !important;

  border-left:
    1px solid rgba(112,149,195,.18) !important;

  border-radius: 19px;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(59,130,246,.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #10263d,
      #091a2b
    );

  box-shadow:
    0 9px 22px rgba(0,0,0,.11),
    inset 0 1px 0 rgba(255,255,255,.03);
}


/* ACTIVA / FINALIZADA */

.fixture-page
.fixture-phase.is-active
.fixture-phase-header {
  border-color:
    rgba(96,165,250,.22) !important;
}

.fixture-page
.fixture-phase.is-finished
.fixture-phase-header {
  border-color:
    rgba(74,222,128,.20) !important;
}


/* TITULO */

.fixture-page .fixture-phase-title {
  gap: 11px;
}


/* ICONO */

.fixture-page .fixture-phase-icon {
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(96,165,250,.20);

  border-radius: 12px;

  background:
    rgba(59,130,246,.10);

  color: #82aaff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

.fixture-page .fixture-phase-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fixture-page
.fixture-phase.is-finished
.fixture-phase-icon {
  border-color:
    rgba(74,222,128,.20);

  background:
    rgba(34,197,94,.09);

  color: #6ddc94;
}


/* ETIQUETA FASE */

.fixture-page .fixture-phase-title small {
  margin: 0;

  color: #7190b5;

  font-size: 7.5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .13em;
}


/* NOMBRE DE FASE */

.fixture-page .fixture-phase-title h2 {
  margin: 4px 0 0;

  color: #f8fafc;

  font-size: 17px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.02em;
}


/* META */

.fixture-page .fixture-phase-meta {
  gap: 5px;
}


/* ESTADO */

.fixture-page .fixture-phase-status {
  min-height: 28px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;

  border:
    1px solid rgba(96,165,250,.21);

  border-radius: 999px;

  background:
    rgba(59,130,246,.09);

  color: #8eb1ff;

  font-size: 7.5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .035em;
}

.fixture-page
.fixture-phase.is-active
.fixture-phase-status {
  border-color:
    rgba(96,165,250,.22);

  background:
    rgba(59,130,246,.10);

  color: #8eb1ff;
}

.fixture-page
.fixture-phase.is-finished
.fixture-phase-status {
  border-color:
    rgba(74,222,128,.20);

  background:
    rgba(34,197,94,.09);

  color: #72dd99;
}


/* CANTIDAD DE PARTIDOS */

.fixture-page .fixture-phase-meta small {
  color: #7f97b4;

  font-size: 9px;
  line-height: 1;
  font-weight: 750;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"]
.fixture-page .fixture-phase-header {
  border-color:
    #d8e4f1 !important;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(59,130,246,.065),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f7faff
    );

  box-shadow:
    0 8px 20px rgba(15,23,42,.05);
}

html[data-theme="light"]
.fixture-page .fixture-phase-title h2 {
  color: #0f172a;
}

html[data-theme="light"]
.fixture-page .fixture-phase-title small {
  color: #607da2;
}

html[data-theme="light"]
.fixture-page .fixture-phase-icon {
  border-color: #cddcff;

  background: #edf4ff;

  color: #326ce3;
}

html[data-theme="light"]
.fixture-page .fixture-phase-status {
  border-color: #c9dcff;

  background: #edf4ff;

  color: #2864dd;
}

html[data-theme="light"]
.fixture-page .fixture-phase-meta small {
  color: #64748b;
}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width: 560px) {

  .fixture-page .fixture-phase-header {
    padding: 12px 13px;

    border-radius: 18px;
  }

  .fixture-page .fixture-phase-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;
  }

  .fixture-page .fixture-phase-title h2 {
    font-size: 16px;
  }

}

/* =========================================================
   LIGAYA FIXTURE CATEGORY PREMIUM V1
   ========================================================= */

.fixture-page .fixture-categoria-bar {
  width: 100%;
  min-height: 68px;
  margin: 2px 0;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 145px;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(112,149,195,.18);
  border-radius: 19px;
  background: linear-gradient(145deg,#10263d,#091a2b);
  box-shadow:
    0 8px 20px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.fixture-page .fixture-categoria-info {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 9px;
}

.fixture-page .fixture-categoria-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(96,165,250,.20);
  border-radius: 11px;
  background: rgba(59,130,246,.09);
  color: #82aaff;
}

.fixture-page .fixture-categoria-icon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fixture-page .fixture-categoria-icon svg rect {
  fill: none;
}

.fixture-page .fixture-categoria-copy {
  min-width: 0;
}

.fixture-page .fixture-categoria-copy > span {
  display: block;
  color: #7190b5;
  font-size: 7px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .12em;
}

.fixture-page .fixture-categoria-copy > strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #f8fafc;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixture-page .fixture-categoria-control {
  position: relative;
  width: 100%;
  min-width: 0;
}

.fixture-page .fixture-categoria-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #8baeff;
  border-bottom: 2px solid #8baeff;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.fixture-page .fixture-categoria-control select {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 38px 0 13px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 13px;
  outline: none;
  background: rgba(4,18,32,.38);
  color: #f8fafc;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
}

.fixture-page .fixture-categoria-control select:focus {
  border-color: rgba(96,165,250,.50);
  box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}

.fixture-page .fixture-categoria-control select option {
  background: #0c2034;
  color: #f8fafc;
}

html[data-theme="light"] .fixture-page .fixture-categoria-bar {
  border-color: #d8e4f1;
  background: linear-gradient(145deg,#ffffff,#f7faff);
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

html[data-theme="light"] .fixture-page .fixture-categoria-icon {
  border-color: #cddcff;
  background: #edf4ff;
  color: #326ce3;
}

html[data-theme="light"] .fixture-page .fixture-categoria-copy > span {
  color: #607da2;
}

html[data-theme="light"] .fixture-page .fixture-categoria-copy > strong {
  color: #0f172a;
}

html[data-theme="light"] .fixture-page .fixture-categoria-control select {
  border-color: #ccddef;
  background: #f7faff;
  color: #0f172a;
}

html[data-theme="light"] .fixture-page .fixture-categoria-control::after {
  border-color: #376ee8;
}

@media (max-width:560px) {

  .fixture-page .fixture-categoria-bar {
    grid-template-columns: minmax(0,1fr) 142px;
    padding: 10px 11px;
    gap: 8px;
    border-radius: 18px;
  }

  .fixture-page .fixture-categoria-info {
    grid-template-columns: 34px minmax(0,1fr);
    gap: 8px;
  }

  .fixture-page .fixture-categoria-icon {
    width: 34px;
    height: 34px;
  }

}

/* =========================================================
   LIGAYA FIXTURE HERO PREMIUM V2
   ========================================================= */

.fixture-page .fixture-hero-v2 {
  position: relative;

  min-height: 0;

  padding: 17px 18px 16px;

  display: grid;
  gap: 15px;

  overflow: hidden;

  border:
    1px solid rgba(95,122,255,.16);

  border-radius: 25px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(61,91,220,.72),
      transparent 42%
    ),
    radial-gradient(
      circle at 88% 85%,
      rgba(25,70,150,.28),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #2639b8 0%,
      #101c67 48%,
      #03091e 100%
    );

  box-shadow:
    0 16px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.fixture-page .fixture-hero-v2::after {
  content: "";

  position: absolute;
  top: -75px;
  right: -60px;

  width: 190px;
  height: 190px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 50%;

  box-shadow:
    0 0 0 28px rgba(255,255,255,.018);

  pointer-events: none;
}


/* =========================================================
   FILA SUPERIOR
   ========================================================= */

.fixture-page .fixture-hero-v2-top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.fixture-page .fixture-hero-v2-kicker {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}

.fixture-page .fixture-hero-v2-icon {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 11px;

  background:
    rgba(255,255,255,.08);

  color: #dce7ff;

  box-sizing: border-box;
}

.fixture-page .fixture-hero-v2-icon svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fixture-page .fixture-hero-v2-kicker small {
  display: block;

  color: #a9beff;

  font-size: 7px;
  line-height: 1;
  font-weight: 950;

  letter-spacing: .12em;
}

.fixture-page .fixture-hero-v2-kicker strong {
  display: block;

  margin-top: 4px;

  color: #ffffff;

  font-size: 10px;
  line-height: 1.1;
  font-weight: 850;
}


/* ESTADO */

.fixture-page .fixture-hero-v2-status {
  flex: 0 0 auto;

  min-height: 27px;
  padding: 0 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 7px;
  line-height: 1;
  font-weight: 950;

  letter-spacing: .05em;
}

.fixture-page
.fixture-hero-v2-status.is-active {
  border:
    1px solid rgba(147,197,253,.20);

  background:
    rgba(96,165,250,.10);

  color: #c7dcff;
}

.fixture-page
.fixture-hero-v2-status.is-finished {
  border:
    1px solid rgba(74,222,128,.22);

  background:
    rgba(34,197,94,.10);

  color: #8be3aa;
}

.fixture-page
.fixture-hero-v2-status.is-empty {
  border:
    1px solid rgba(148,163,184,.18);

  background:
    rgba(148,163,184,.08);

  color: #cbd5e1;
}


/* =========================================================
   CENTRO
   ========================================================= */

.fixture-page .fixture-hero-v2-main {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items: end;

  gap: 14px;
}

.fixture-page .fixture-hero-v2-copy {
  min-width: 0;
}

.fixture-page .fixture-hero-v2-copy h2 {
  margin: 0;

  color: #ffffff;

  font-size: 25px;
  line-height: 1;
  font-weight: 1000;

  letter-spacing: -.035em;
}

.fixture-page .fixture-hero-v2-copy p {
  max-width: 230px;

  margin: 7px 0 0;

  color: #c7d4f0;

  font-size: 9.5px;
  line-height: 1.35;
  font-weight: 650;
}


/* METRICAS */

.fixture-page .fixture-hero-v2-stats {
  display: flex;
  gap: 7px;
}

.fixture-page .fixture-hero-v2-stat {
  min-width: 58px;
  padding: 8px 8px 7px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 12px;

  background:
    rgba(2,8,28,.24);

  text-align: center;

  backdrop-filter:
    blur(4px);
}

.fixture-page .fixture-hero-v2-stat strong {
  display: block;

  color: #ffffff;

  font-size: 16px;
  line-height: 1;
  font-weight: 1000;
}

.fixture-page .fixture-hero-v2-stat span {
  display: block;

  margin-top: 5px;

  color: #9eb1d7;

  font-size: 6.5px;
  line-height: 1;
  font-weight: 850;
}


/* =========================================================
   PROGRESO
   ========================================================= */

.fixture-page .fixture-hero-v2-progress-head {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.fixture-page .fixture-hero-v2-progress-head span {
  color: #a5b8dc;

  font-size: 8px;
  font-weight: 750;
}

.fixture-page .fixture-hero-v2-progress-head strong {
  color: #ffffff;

  font-size: 10px;
  font-weight: 950;
}

.fixture-page .fixture-progress-v2 {
  position: relative;
  z-index: 1;

  height: 6px;

  margin: -8px 0 0;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.12);
}

.fixture-page .fixture-progress-v2 > div {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #5b8cff,
      #65d4ff
    );

  box-shadow:
    0 0 10px rgba(101,212,255,.25);
}


/* FINALIZADO */

.fixture-page
.fixture-hero-v2.is-finished
.fixture-progress-v2 > div {
  background:
    linear-gradient(
      90deg,
      #22c55e,
      #86efac
    );
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"]
.fixture-page .fixture-hero-v2 {
  border-color:
    rgba(71,98,220,.18);

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(71,90,225,.88),
      transparent 43%
    ),
    linear-gradient(
      135deg,
      #3548ce,
      #14246f 55%,
      #061332
    );

  box-shadow:
    0 14px 30px rgba(29,48,110,.16);
}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width:560px) {

  .fixture-page .fixture-hero-v2 {
    padding:
      16px 16px 15px;

    gap: 14px;

    border-radius: 24px;
  }

  .fixture-page .fixture-hero-v2-main {
    grid-template-columns:
      minmax(0,1fr)
      auto;

    gap: 10px;
  }

  .fixture-page .fixture-hero-v2-copy h2 {
    font-size: 23px;
  }

  .fixture-page .fixture-hero-v2-copy p {
    max-width: 170px;

    font-size: 8.5px;
  }

  .fixture-page .fixture-hero-v2-stat {
    min-width: 52px;
    padding:
      7px 6px;
  }

  .fixture-page .fixture-hero-v2-stat strong {
    font-size: 15px;
  }

  .fixture-page .fixture-hero-v2-stat span {
    font-size: 6px;
  }

}

/* =========================================================
   LIGAYA FIXTURE HERO SUMMARY V3
   ========================================================= */

.fixture-page .fixture-hero-v2-main {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
}

.fixture-page .fixture-hero-v2-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 1px;

  color: #b8c8e6;

  font-size: 8.5px;
  line-height: 1.2;
  font-weight: 800;
}

.fixture-page .fixture-hero-v2-summary span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.fixture-page .fixture-hero-v2-summary i {
  width: 3px;
  height: 3px;

  flex: 0 0 3px;

  border-radius: 50%;

  background: #78a5ff;
}

html[data-theme="light"]
.fixture-page .fixture-hero-v2-summary {
  color: #c4d2ee;
}

@media (max-width:560px) {

  .fixture-page .fixture-hero-v2-main {
    grid-template-columns: 1fr;
    gap: 7px;
  }

}

/* =========================================================
   LIGAYA TABLA HERO PREMIUM V1
   ========================================================= */

.tabla-page .tabla-hero-v2 {
  position: relative;

  min-height: 0;

  padding: 17px 18px 18px;

  display: grid;
  gap: 16px;

  overflow: hidden;

  border:
    1px solid rgba(95,122,255,.16);

  border-radius: 25px;

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(61,91,220,.72),
      transparent 42%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(25,70,150,.25),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #2639b8 0%,
      #101c67 50%,
      #03091e 100%
    );

  box-shadow:
    0 16px 34px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.tabla-page .tabla-hero-v2::after {
  content: "";

  position: absolute;
  top: -75px;
  right: -58px;

  width: 190px;
  height: 190px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 50%;

  box-shadow:
    0 0 0 28px rgba(255,255,255,.018);

  pointer-events: none;
}


/* SUPERIOR */

.tabla-page .tabla-hero-v2-top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.tabla-page .tabla-hero-v2-kicker {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}

.tabla-page .tabla-hero-v2-icon {
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 11px;

  background:
    rgba(255,255,255,.08);

  color: #f5c85f;

  box-sizing: border-box;
}

.tabla-page .tabla-hero-v2-icon svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabla-page .tabla-hero-v2-kicker small {
  display: block;

  margin: 0;

  color: #b9c9ff;

  font-size: 7px;
  line-height: 1;
  font-weight: 950;

  letter-spacing: .12em;
}

.tabla-page .tabla-hero-v2-kicker strong {
  display: block;

  margin-top: 4px;

  color: #ffffff;

  font-size: 10px;
  line-height: 1.1;
  font-weight: 850;
}


/* ESTADO */

.tabla-page .tabla-hero-v2-status {
  flex: 0 0 auto;

  min-height: 27px;
  padding: 0 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 7px;
  line-height: 1;
  font-weight: 950;

  letter-spacing: .05em;
}

.tabla-page .tabla-hero-v2-status.is-active {
  border:
    1px solid rgba(147,197,253,.20);

  background:
    rgba(96,165,250,.10);

  color: #c7dcff;
}

.tabla-page .tabla-hero-v2-status.is-finished {
  border:
    1px solid rgba(74,222,128,.22);

  background:
    rgba(34,197,94,.10);

  color: #8be3aa;
}


/* CONTENIDO */

.tabla-page .tabla-hero-v2-main {
  position: relative;
  z-index: 1;
}

.tabla-page .tabla-hero-v2-main h2 {
  margin: 0;

  color: #ffffff;

  font-size: 25px;
  line-height: 1;

  font-weight: 1000;
  letter-spacing: -.035em;
}

.tabla-page .tabla-hero-v2-main p {
  max-width: 290px;

  margin: 8px 0 0;

  color: #c7d4f0;

  font-size: 9.5px;
  line-height: 1.35;
  font-weight: 650;
}


/* LIGHT */

html[data-theme="light"]
.tabla-page .tabla-hero-v2 {
  border-color:
    rgba(71,98,220,.18);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(71,90,225,.88),
      transparent 43%
    ),
    linear-gradient(
      135deg,
      #3548ce,
      #14246f 55%,
      #061332
    );

  box-shadow:
    0 14px 30px rgba(29,48,110,.16);
}


/* MOVIL */

@media (max-width:560px) {

  .tabla-page .tabla-hero-v2 {
    padding:
      16px 16px 17px;

    gap: 14px;

    border-radius: 24px;
  }

  .tabla-page .tabla-hero-v2-main h2 {
    font-size: 23px;
  }

  .tabla-page .tabla-hero-v2-main p {
    font-size: 8.5px;
  }

}

/* =========================================================
   LIGAYA TABLA CATEGORY PREMIUM V1
   ========================================================= */

.tabla-page .tabla-categoria-bar {
  min-height: 68px;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 145px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(112,149,195,.18);
  border-radius: 18px;
  background: linear-gradient(145deg,#10263d,#091a2b);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

.tabla-page .tabla-categoria-info {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 8px;
}

.tabla-page .tabla-categoria-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(96,165,250,.20);
  border-radius: 11px;
  background: rgba(59,130,246,.09);
  color: #82aaff;
  box-sizing: border-box;
}

.tabla-page .tabla-categoria-icon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabla-page .tabla-categoria-copy {
  min-width: 0;
}

.tabla-page .tabla-categoria-copy > span {
  display: block;
  color: #7190b5;
  font-size: 7px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .12em;
}

.tabla-page .tabla-categoria-copy > strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #f8fafc;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabla-page .tabla-categoria-control {
  position: relative;
  width: 100%;
  min-width: 0;
}

.tabla-page .tabla-categoria-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #8baeff;
  border-bottom: 2px solid #8baeff;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.tabla-page .tabla-categoria-control select {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 38px 0 13px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 13px;
  outline: none;
  background: rgba(4,18,32,.38);
  color: #f8fafc;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
}

.tabla-page .tabla-categoria-control select:focus {
  border-color: rgba(96,165,250,.50);
  box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}

.tabla-page .tabla-categoria-control select option {
  background: #0c2034;
  color: #f8fafc;
}

html[data-theme="light"] .tabla-page .tabla-categoria-bar {
  border-color: #d8e4f1;
  background: linear-gradient(145deg,#ffffff,#f7faff);
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

html[data-theme="light"] .tabla-page .tabla-categoria-icon {
  border-color: #cddcff;
  background: #edf4ff;
  color: #326ce3;
}

html[data-theme="light"] .tabla-page .tabla-categoria-copy > span {
  color: #607da2;
}

html[data-theme="light"] .tabla-page .tabla-categoria-copy > strong {
  color: #0f172a;
}

html[data-theme="light"] .tabla-page .tabla-categoria-control select {
  border-color: #ccddef;
  background: #f7faff;
  color: #0f172a;
}

html[data-theme="light"] .tabla-page .tabla-categoria-control::after {
  border-color: #376ee8;
}

/* =========================================================
   LIGAYA TABLA RANKING CARDS PREMIUM V1
   ========================================================= */


/* LISTA */

.tabla-page .tabla-list {
  display: grid;
  gap: 9px;
}


/* TARJETA NORMAL */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion) {
  position: relative;

  min-width: 0;

  display: grid;
  grid-template-columns:
    44px
    minmax(0,1fr)
    58px;

  align-items: center;

  gap: 10px;

  padding:
    12px
    13px;

  box-sizing: border-box;

  border:
    1px solid
    rgba(103,139,183,.16);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      #10263d 0%,
      #091a2b 100%
    );

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.10);

  overflow: hidden;
}


/* LIDER */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion).is-first {
  border:
    1px solid
    rgba(245,190,70,.42);

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(245,190,70,.13),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #14283c,
      #091a2b
    );

  box-shadow:
    0 10px 24px
    rgba(0,0,0,.12),
    inset 3px 0 0
    rgba(245,190,70,.70);
}


/* POSICION */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-rank {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(96,165,250,.18);

  border-radius: 12px;

  background:
    rgba(59,130,246,.08);

  color:
    #a8c5ff;

  font-size: 16px;
  line-height: 1;
  font-weight: 950;

  box-shadow: none;
}


/* CUERPO */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-main {
  min-width: 0;
}


/* EQUIPO */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-team-head {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-flag {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 50%;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 5px 12px
    rgba(0,0,0,.16);
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-flag img,

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-flag .team-flag-img {
  width: 30px;
  height: 30px;

  display: block;

  object-fit: cover;

  border-radius: 50%;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-equipo-info {
  min-width: 0;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-team-head strong {
  display: block;

  min-width: 0;

  overflow: hidden;

  color: #f8fafc;

  font-size: 14px;
  line-height: 1.15;
  font-weight: 900;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ESTADISTICAS */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid {
  margin-top: 7px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid span {
  min-width: 29px;

  padding:
    4px
    6px;

  box-sizing: border-box;

  border:
    1px solid
    rgba(119,148,184,.12);

  border-radius: 8px;

  background:
    rgba(255,255,255,.045);

  color:
    #7f9ab9;

  font-size: 8px;
  line-height: 1;
  font-weight: 850;

  text-align: center;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid b {
  margin-left: 2px;

  color:
    #dbe8ff;

  font-size: 9px;
  font-weight: 950;
}


/* GANADOS */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-win {
  border-color:
    rgba(34,197,94,.17) !important;

  background:
    rgba(34,197,94,.07) !important;

  color:
    #70b98b !important;
}

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-win b {
  color:
    #80dfa4;
}


/* PERDIDOS */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-loss {
  border-color:
    rgba(248,113,113,.16) !important;

  background:
    rgba(248,113,113,.065) !important;

  color:
    #bb7d84 !important;
}

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-loss b {
  color:
    #f2a0a6;
}


/* PUNTOS */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro strong {
  display: block;

  margin: 0;

  color:
    #70a0ff;

  font-size: 28px;
  line-height: .9;
  font-weight: 1000;

  letter-spacing: -.04em;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro span {
  margin-top: 4px;

  color:
    #718dab;

  font-size: 7px;
  line-height: 1;
  font-weight: 950;

  letter-spacing: .08em;
  text-transform: uppercase;
}


/* RESULTADO FINAL */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-titulo-final {
  width: max-content;

  margin-top: 4px;

  padding:
    3px
    7px;

  border:
    1px solid
    rgba(245,190,70,.20);

  border-radius: 999px;

  background:
    rgba(245,190,70,.08);

  color:
    #f0ca68;

  font-size: 7px;
  line-height: 1;
  font-weight: 950;

  letter-spacing: .06em;
}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion) {
  border-color:
    #dce6f2;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7faff
    );

  box-shadow:
    0 8px 20px
    rgba(15,23,42,.055);
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion).is-first {
  border-color:
    rgba(222,170,45,.55);

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(245,190,70,.14),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      #fffdf7,
      #ffffff
    );

  box-shadow:
    0 9px 22px
    rgba(164,119,18,.08),
    inset 3px 0 0
    rgba(226,176,52,.72);
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-rank {
  border-color:
    #d6e3f6;

  background:
    #edf4ff;

  color:
    #346ee5;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-team-head strong {
  color:
    #122033;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-flag {
  border-color:
    #e2e8f0;

  background:
    #ffffff;

  box-shadow:
    0 4px 10px
    rgba(15,23,42,.08);
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid span {
  border-color:
    #dde6f1;

  background:
    #f5f8fc;

  color:
    #64748b;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid b {
  color:
    #315fae;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-win {
  border-color:
    #ccebd6 !important;

  background:
    #f0faf3 !important;

  color:
    #49835c !important;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-win b {
  color:
    #248548;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-loss {
  border-color:
    #f1d3d3 !important;

  background:
    #fff5f5 !important;

  color:
    #9f6064 !important;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-loss b {
  color:
    #c84e57;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro strong {
  color:
    #316ce4;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro span {
  color:
    #70839c;
}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width:430px) {

  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion) {
    grid-template-columns:
      40px
      minmax(0,1fr)
      50px;

    gap: 8px;

    padding:
      11px
      11px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-rank {
    width: 36px;
    height: 36px;

    border-radius: 11px;

    font-size: 15px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-flag {
    width: 35px;
    height: 35px;

    flex-basis: 35px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-flag img,

  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-flag .team-flag-img {
    width: 28px;
    height: 28px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-team-head strong {
    font-size: 13px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid {
    gap: 4px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid span {
    min-width: 27px;

    padding:
      3px
      5px;

    font-size: 7px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid b {
    font-size: 8px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-points-pro strong {
    font-size: 25px;
  }

}

/* =========================================================
   LIGAYA TABLA RANKING CARDS PREMIUM V2
   ESCALA VISUAL
   ========================================================= */

.tabla-page .tabla-list {
  gap: 11px;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion) {
  grid-template-columns:
    50px
    minmax(0,1fr)
    62px;

  gap: 11px;

  min-height: 94px;

  padding:
    14px
    14px;

  border-radius: 22px;
}


/* POSICION */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-rank {
  width: 44px;
  height: 44px;

  border-radius: 14px;

  font-size: 18px;
}


/* ESCUDO */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-flag {
  width: 43px;
  height: 43px;

  flex-basis: 43px;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-flag img,

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-flag .team-flag-img {
  width: 35px;
  height: 35px;
}


/* EQUIPO */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-team-head {
  gap: 10px;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-team-head strong {
  font-size: 15.5px;
  line-height: 1.15;
}


/* TITULO FINAL */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-titulo-final {
  margin-top: 5px;

  padding:
    3px
    8px;

  font-size: 7.5px;
}


/* ESTADISTICAS */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid {
  margin-top: 8px;

  gap: 5px;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid span {
  min-width: 31px;

  padding:
    4px
    7px;

  border-radius: 9px;

  font-size: 8.5px;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid b {
  font-size: 9.5px;
}


/* PUNTOS */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro strong {
  font-size: 32px;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro span {
  margin-top: 5px;

  font-size: 7.5px;
}


/* MOVIL */

@media (max-width:430px) {

  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion) {
    grid-template-columns:
      46px
      minmax(0,1fr)
      56px;

    min-height: 90px;

    gap: 9px;

    padding:
      13px
      12px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-rank {
    width: 42px;
    height: 42px;

    font-size: 17px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-flag {
    width: 40px;
    height: 40px;

    flex-basis: 40px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-flag img,

  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-flag .team-flag-img {
    width: 33px;
    height: 33px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-team-head strong {
    font-size: 14.5px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid span {
    min-width: 29px;

    padding:
      4px
      6px;

    font-size: 8px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid b {
    font-size: 9px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-points-pro strong {
    font-size: 29px;
  }

}

/* =========================================================
   LIGAYA TABLA STATS LEGIBILITY V1
   ========================================================= */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid span {
  min-width: 32px;

  padding:
    4px
    7px;

  color:
    #9bb1ca;

  font-size: 9px;
  font-weight: 900;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid b {
  margin-left: 2px;

  color:
    #e7efff;

  font-size: 10px;
  font-weight: 1000;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-win {
  color:
    #72c28f !important;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-win b {
  color:
    #8be8ad;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-loss {
  color:
    #d18a91 !important;
}


.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-loss b {
  color:
    #ffabb1;
}


/* LIGHT */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid span {
  color:
    #566b84;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid b {
  color:
    #234f96;
}


/* MOVIL */

@media (max-width:430px) {

  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid span {
    min-width: 30px;

    padding:
      4px
      6px;

    font-size: 8.5px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid b {
    font-size: 9.5px;
  }

}

/* =========================================================
   LIGAYA TABLA LIGHT PREMIUM V2
   ========================================================= */


/* SELECTOR */

html[data-theme="light"]
.tabla-page
.tabla-categoria-bar {
  border-color: #cfddec;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f3f7fc 100%
    );

  box-shadow:
    0 8px 18px rgba(30,64,110,.07);
}


html[data-theme="light"]
.tabla-page
.tabla-categoria-control select {
  border-color: #c7d8eb;

  background:
    #f8fbff;

  color:
    #14233a;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9);
}


/* TARJETAS */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion) {
  border-color:
    #cfddec;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f5f8fc 100%
    );

  box-shadow:
    0 8px 20px rgba(29,53,87,.075);
}


/* CAMPEON */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion).is-first {
  border-color:
    rgba(225,170,42,.70);

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(250,204,70,.17),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #fffdf6 0%,
      #fffaf0 45%,
      #ffffff 100%
    );

  box-shadow:
    0 10px 23px rgba(174,125,24,.12),
    inset 3px 0 0 rgba(226,171,40,.82);
}


/* POSICION */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-rank {
  border-color:
    #bfd4f3;

  background:
    linear-gradient(
      145deg,
      #edf5ff,
      #e7f0fc
    );

  color:
    #2d63c8;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9);
}


/* LOGO */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-flag {
  border-color:
    #d6e0eb;

  background:
    #ffffff;

  box-shadow:
    0 5px 12px rgba(24,48,78,.10);
}


/* NOMBRE EQUIPO */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-team-head strong {
  color:
    #102037;
}


/* ESTADISTICAS */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid span {
  border-color:
    #cedbea;

  background:
    #edf3f9;

  color:
    #536b85;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid b {
  color:
    #244e8f;
}


/* GANADOS */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-win {
  border-color:
    #b8dfc6 !important;

  background:
    #e8f7ed !important;

  color:
    #397a50 !important;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-win b {
  color:
    #168341;
}


/* PERDIDOS */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-loss {
  border-color:
    #edc6c9 !important;

  background:
    #fff0f1 !important;

  color:
    #a3565d !important;
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid
.stat-loss b {
  color:
    #c83e49;
}


/* PUNTOS */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro strong {
  color:
    #2f67dc;

  text-shadow:
    0 1px 0 rgba(255,255,255,.8);
}


html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro span {
  color:
    #617792;
}


/* CAMPEON / SUBCAMPEON / TERCERO */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-titulo-final {
  border-color:
    rgba(215,159,39,.32);

  background:
    #fff7df;

  color:
    #9b6812;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9);
}


/* CAMPEON MAS DESTACADO */

html[data-theme="light"]
.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion).is-first
.tabla-titulo-final {
  border-color:
    rgba(204,145,20,.42);

  background:
    #fff1c4;

  color:
    #8c5a00;
}

/* =========================================================
   LIGAYA FIXTURE TABLA TYPOGRAPHY SCALE V1
   Alineada visualmente con INICIO
   ========================================================= */


/* =========================================================
   FIXTURE - HERO
   ========================================================= */

.fixture-page
.fixture-hero-v2-kicker small {
  font-size: 8.5px;
}

.fixture-page
.fixture-hero-v2-kicker strong {
  font-size: 11.5px;
}

.fixture-page
.fixture-hero-v2-status {
  font-size: 8px;
}

.fixture-page
.fixture-hero-v2-main h2 {
  font-size: 29px;
  line-height: 1.05;
}

.fixture-page
.fixture-hero-v2-main p {
  max-width: 320px;

  font-size: 11px;
  line-height: 1.35;
}

.fixture-page
.fixture-hero-v2-summary {
  font-size: 10px;
}

.fixture-page
.fixture-hero-v2-progress-head {
  font-size: 9px;
}


/* =========================================================
   FIXTURE - CATEGORIA
   ========================================================= */

.fixture-page
.fixture-categoria-copy > span {
  font-size: 8.5px;
}

.fixture-page
.fixture-categoria-copy > strong {
  font-size: 11.5px;
}

.fixture-page
.fixture-categoria-control select {
  font-size: 13px;
}


/* =========================================================
   FIXTURE - FASE
   ========================================================= */

.fixture-page
.fixture-phase-card small {
  font-size: 8.5px;
}

.fixture-page
.fixture-phase-card strong {
  font-size: 17px;
}

.fixture-page
.fixture-phase-card .fixture-phase-status {
  font-size: 8px;
}

.fixture-page
.fixture-phase-card .fixture-phase-count {
  font-size: 10px;
}


/* =========================================================
   FIXTURE - RONDAS
   ========================================================= */

.fixture-page
.fixture-round-title {
  font-size: 17px;
}

.fixture-page
.fixture-round-header small,
.fixture-page
.fixture-round-meta {
  font-size: 10px;
}


/* =========================================================
   FIXTURE - PARTIDOS
   ========================================================= */

.fixture-page
.match-pro-code,
.fixture-page
.match-code {
  font-size: 9px;
}

.fixture-page
.match-pro-time,
.fixture-page
.match-time {
  font-size: 14px;
}

.fixture-page
.match-pro-status,
.fixture-page
.match-status {
  font-size: 8px;
}

.fixture-page
.match-team strong {
  font-size: 15.5px;
  line-height: 1.15;
}

.fixture-page
.match-vs {
  font-size: 16px;
}


/* =========================================================
   TABLA - HERO
   ========================================================= */

.tabla-page
.tabla-hero-v2-kicker small {
  font-size: 8.5px;
}

.tabla-page
.tabla-hero-v2-kicker strong {
  font-size: 11.5px;
}

.tabla-page
.tabla-hero-v2-status {
  font-size: 8px;
}

.tabla-page
.tabla-hero-v2-main h2 {
  font-size: 29px;
  line-height: 1.05;
}

.tabla-page
.tabla-hero-v2-main p {
  max-width: 320px;

  font-size: 11px;
  line-height: 1.35;
}


/* =========================================================
   TABLA - CATEGORIA
   ========================================================= */

.tabla-page
.tabla-categoria-copy > span {
  font-size: 8.5px;
}

.tabla-page
.tabla-categoria-copy > strong {
  font-size: 11.5px;
}

.tabla-page
.tabla-categoria-control select {
  font-size: 13px;
}


/* =========================================================
   TABLA - EQUIPOS
   ========================================================= */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-team-head strong {
  font-size: 16px;
  line-height: 1.15;
}


/* =========================================================
   TABLA - CAMPEON / SUBCAMPEON
   ========================================================= */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-titulo-final {
  font-size: 8.5px;
}


/* =========================================================
   TABLA - ESTADISTICAS
   ========================================================= */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid span {
  font-size: 9.5px;
}

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-stats-grid b {
  font-size: 10.5px;
}


/* =========================================================
   TABLA - PUNTOS
   ========================================================= */

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro strong {
  font-size: 34px;
}

.tabla-page
.tabla-card-pro:not(.tabla-card-eliminacion)
.tabla-points-pro span {
  font-size: 8.5px;
}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width:430px) {

  .fixture-page
  .fixture-hero-v2-main h2,

  .tabla-page
  .tabla-hero-v2-main h2 {
    font-size: 27px;
  }


  .fixture-page
  .fixture-hero-v2-main p,

  .tabla-page
  .tabla-hero-v2-main p {
    font-size: 10.5px;
  }


  .fixture-page
  .match-team strong {
    font-size: 15px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-team-head strong {
    font-size: 15.5px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid span {
    font-size: 9px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-stats-grid b {
    font-size: 10px;
  }


  .tabla-page
  .tabla-card-pro:not(.tabla-card-eliminacion)
  .tabla-points-pro strong {
    font-size: 32px;
  }

}

/* =========================================================
   LIGAYA PUBLIC KPI LIGHT PREMIUM V2
   ========================================================= */

html[data-theme="light"]
.public-dashboard
.public-kpi-card {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    #d5e1ef;

  background:
    linear-gradient(
      160deg,
      #ffffff 0%,
      #f7faff 100%
    );

  box-shadow:
    0 9px 20px
    rgba(31,55,90,.075);

  isolation: isolate;
}


/* ACENTO INFERIOR */

html[data-theme="light"]
.public-dashboard
.public-kpi-card::after {
  content: "";

  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;

  height: 2px;

  border-radius:
    999px 999px 0 0;

  opacity: .80;
}


/* ICONO */

html[data-theme="light"]
.public-dashboard
.public-kpi-card
.public-kpi-svg {
  border:
    1px solid
    rgba(49,108,228,.15);

  box-shadow:
    0 5px 12px
    rgba(25,55,100,.08),
    inset 0 1px 0
    rgba(255,255,255,.95);
}


/* NUMERO */

html[data-theme="light"]
.public-dashboard
.public-kpi-card > strong {
  margin-top: 1px;

  font-weight: 1000;

  letter-spacing:
    -.035em;
}


/* ETIQUETA */

html[data-theme="light"]
.public-dashboard
.public-kpi-card > small {
  color:
    #526981;

  font-weight: 850;
}


/* =========================================================
   KPI 1 - EQUIPOS
   ========================================================= */

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(1) {
  border-color:
    #c9dcfa;

  background:
    linear-gradient(
      160deg,
      #ffffff,
      #f2f7ff
    );
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(1)
.public-kpi-svg {
  background:
    linear-gradient(
      145deg,
      #edf5ff,
      #dceaff
    );

  color:
    #3478ed;

  border-color:
    #bfd7ff;
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(1) > strong {
  color:
    #326ce4;
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(1)::after {
  background:
    #3b82f6;
}


/* =========================================================
   KPI 2 - JUGADORES
   ========================================================= */

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(2) {
  border-color:
    #d7d3fb;

  background:
    linear-gradient(
      160deg,
      #ffffff,
      #f7f4ff
    );
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(2)
.public-kpi-svg {
  background:
    linear-gradient(
      145deg,
      #f4f0ff,
      #e8e3ff
    );

  color:
    #8065df;

  border-color:
    #d4caff;
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(2) > strong {
  color:
    #7057cf;
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(2)::after {
  background:
    #8b6ee8;
}


/* =========================================================
   KPI 3 - PARTIDOS
   ========================================================= */

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(3) {
  border-color:
    #bee8ee;

  background:
    linear-gradient(
      160deg,
      #ffffff,
      #f0fbfc
    );
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(3)
.public-kpi-svg {
  background:
    linear-gradient(
      145deg,
      #ecfdff,
      #d7f7fa
    );

  color:
    #08a9bd;

  border-color:
    #b7edf3;
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(3) > strong {
  color:
    #0798ad;
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(3)::after {
  background:
    #06b6d4;
}


/* =========================================================
   KPI 4 - EN VIVO
   ========================================================= */

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(4) {
  border-color:
    #f2d3bd;

  background:
    linear-gradient(
      160deg,
      #ffffff,
      #fff7f1
    );
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(4)
.public-kpi-svg {
  background:
    linear-gradient(
      145deg,
      #fff5ed,
      #ffe7d5
    );

  color:
    #e97926;

  border-color:
    #ffd2b2;
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(4) > strong {
  color:
    #db6b1f;
}

html[data-theme="light"]
.public-dashboard
.public-kpi-card:nth-child(4)::after {
  background:
    #f97316;
}

/* =========================================================
   LIGAYA FIXTURE LIGHT SUCCESS CONTRAST V1
   ========================================================= */


/* FASE FINALIZADA */

html[data-theme="light"]
.fixture-page
.fixture-phase.is-finished
.fixture-phase-header {
  border-color:
    #9be4c4;

  background:
    linear-gradient(
      145deg,
      #f2fff9 0%,
      #e8fbf2 100%
    );

  box-shadow:
    0 7px 18px
    rgba(17,140,86,.08);
}


html[data-theme="light"]
.fixture-page
.fixture-phase.is-finished
.fixture-phase-icon {
  border-color:
    #9ce8c5;

  background:
    #e1faee;

  color:
    #12a867;
}


html[data-theme="light"]
.fixture-page
.fixture-phase.is-finished
.fixture-phase-status {
  border-color:
    #8addb8;

  background:
    #dff8ec;

  color:
    #0b9259;

  font-weight: 950;
}


/* PARTIDO FINALIZADO - BADGE */

html[data-theme="light"]
.fixture-page
.match-card-pro.is-finished
.match-status {
  border-color:
    #afd9ff;

  background:
    #edf7ff;

  color:
    #2869c7;
}


/* RESULTADO FINAL */

html[data-theme="light"]
.fixture-page
.match-card-pro.is-finished
.match-result-final {
  border:
    1px solid
    #96e4ba;

  background:
    linear-gradient(
      145deg,
      #dff9eb 0%,
      #c9f3dc 100%
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.85),
    0 5px 14px
    rgba(19,145,87,.08);
}


html[data-theme="light"]
.fixture-page
.match-card-pro.is-finished
.match-result-final strong {
  color:
    #087d49;

  text-shadow:
    0 1px 0
    rgba(255,255,255,.7);
}


html[data-theme="light"]
.fixture-page
.match-card-pro.is-finished
.match-result-final span {
  color:
    #087044;

  font-weight:
    850;
}

/* =========================================================
   LIGAYA EVENTOS PORTRAIT LOCK V1
   ========================================================= */

@media (orientation: portrait) {
  body.event-mode {
    width: 100%;
    height: 100%;

    overflow: hidden !important;
  }


  body.event-mode #app {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    min-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #07132f;
  }


  body.event-mode .event-center-full {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
      linear-gradient(
        180deg,
        #0b1f4e 0%,
        #061127 100%
      );
  }


  /*
   * El contenido horizontal NO debe existir
   * visualmente mientras el telefono este vertical.
   */

  body.event-mode
  .event-landscape-content {
    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
  }


  /*
   * Aviso ocupa TODO el viewport.
   */

  body.event-mode
  .event-rotate-warning {
    position: absolute !important;

    inset: 0 !important;

    z-index: 100 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 100dvh !important;

    margin: 0 !important;

    padding:
      max(70px, 10vh)
      24px
      32px !important;

    box-sizing: border-box;

    display: flex !important;

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    text-align: center;

    overflow: hidden;

    background:
      radial-gradient(
        circle at 50% 0%,
        rgba(45,85,190,.28),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        #0b1f4e 0%,
        #061127 100%
      );
  }


  /*
   * En vertical tampoco necesitamos
   * el control de voz.
   */

  body.event-mode
  .event-voice-btn {
    display: none !important;
  }

}

/* =========================================================
   LIGAYA EVENTOS EXIT GLOBAL V1
   ========================================================= */

body.event-mode
.event-exit-global {
  position: fixed;

  top:
    max(
      14px,
      env(safe-area-inset-top)
    );

  left:
    max(
      14px,
      env(safe-area-inset-left)
    );

  z-index: 1000;

  min-width: 78px;
  height: 40px;

  padding:
    0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 13px;

  background:
    rgba(5,16,43,.76);

  color:
    #ffffff;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.22),
    inset 0 1px 0
    rgba(255,255,255,.08);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}


body.event-mode
.event-exit-global > span {
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
}


body.event-mode
.event-exit-global > strong {
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}


body.event-mode
.event-exit-global:active {
  transform:
    scale(.96);
}


/* VERTICAL */

@media (orientation: portrait) {

  body.event-mode
  .event-exit-global {
    top:
      max(
        16px,
        env(safe-area-inset-top)
      );

    left:
      max(
        16px,
        env(safe-area-inset-left)
      );

    min-width: 82px;
    height: 42px;

    border-color:
      rgba(130,166,255,.25);

    background:
      rgba(8,24,61,.82);
  }

}


/* HORIZONTAL */

@media (orientation: landscape) {

  body.event-mode
  .event-exit-global {
    top:
      max(
        10px,
        env(safe-area-inset-top)
      );

    left:
      max(
        10px,
        env(safe-area-inset-left)
      );

    height: 36px;

    min-width: 72px;

    padding:
      0 11px;
  }

}

/* =========================================================
   LIGAYA EVENTOS PORTRAIT UX V2
   ========================================================= */

@media (orientation: portrait) {

  /*
   * Aviso centrado visualmente.
   */

  body.event-mode
  .event-rotate-warning {
    justify-content:
      center !important;

    padding:
      70px
      28px
      120px !important;
  }


  /*
   * Icono de rotacion con presencia.
   */

  body.event-mode
  .event-rotate-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    border:
      1px solid
      rgba(132,166,255,.20);

    border-radius: 18px;

    background:
      linear-gradient(
        145deg,
        rgba(69,108,220,.24),
        rgba(29,57,133,.16)
      );

    box-shadow:
      0 12px 30px
      rgba(0,0,0,.18),
      inset 0 1px 0
      rgba(255,255,255,.08);

    font-size: 30px;
    line-height: 1;
  }


  body.event-mode
  .event-rotate-warning h2 {
    margin:
      0 0 8px;

    color:
      #ffffff;

    font-size: 28px;
    line-height: 1.05;
    font-weight: 1000;

    letter-spacing:
      -.03em;
  }


  body.event-mode
  .event-rotate-warning p {
    max-width: 290px;

    margin: 0;

    color:
      #d7e3ff;

    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
  }


  /*
   * Volver:
   * en vertical solo mostramos la flecha.
   */

  body.event-mode
  .event-exit-global {
    top:
      max(
        18px,
        env(safe-area-inset-top)
      );

    left:
      max(
        18px,
        env(safe-area-inset-left)
      );

    width: 44px;
    min-width: 44px;
    height: 44px;

    padding: 0;

    border:
      1px solid
      rgba(137,169,255,.24);

    border-radius:
      14px;

    background:
      linear-gradient(
        145deg,
        rgba(16,42,94,.92),
        rgba(7,25,61,.92)
      );

    box-shadow:
      0 8px 22px
      rgba(0,0,0,.22),
      inset 0 1px 0
      rgba(255,255,255,.08);
  }


  body.event-mode
  .event-exit-global > strong {
    display: none;
  }


  body.event-mode
  .event-exit-global > span {
    font-size: 23px;
    line-height: 1;

    transform:
      translateY(-1px);
  }

}

/* =========================================================
   LIGAYA EVENTOS PORTRAIT CLOSE X V1
   ========================================================= */

@media (orientation: portrait) {

  body.event-mode
  .event-exit-global {
    left: auto !important;

    right:
      max(
        18px,
        env(safe-area-inset-right)
      ) !important;

    top:
      max(
        18px,
        env(safe-area-inset-top)
      ) !important;

    width: 44px;
    min-width: 44px;
    height: 44px;

    padding: 0;

    border:
      1px solid
      rgba(137,169,255,.24);

    border-radius: 14px;

    background:
      linear-gradient(
        145deg,
        rgba(16,42,94,.92),
        rgba(7,25,61,.92)
      );

    color: #ffffff;

    box-shadow:
      0 8px 22px
      rgba(0,0,0,.22),
      inset 0 1px 0
      rgba(255,255,255,.08);
  }


  body.event-mode
  .event-exit-global > strong {
    display: none;
  }


  /*
   * Ocultamos la flecha original
   * y mostramos una X limpia.
   */

  body.event-mode
  .event-exit-global > span {
    position: relative;

    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    font-size: 0;

    transform: none;
  }


  body.event-mode
  .event-exit-global > span::before {
    content: "×";

    color: #ffffff;

    font-size: 27px;
    line-height: 1;
    font-weight: 300;

    transform:
      translateY(-1px);
  }


  body.event-mode
  .event-exit-global:hover {
    border-color:
      rgba(166,190,255,.38);

    background:
      linear-gradient(
        145deg,
        rgba(23,53,112,.96),
        rgba(9,31,73,.96)
      );
  }


  body.event-mode
  .event-exit-global:active {
    transform:
      scale(.94);
  }

}

/* =========================================================
   LIGAYA PUBLIC LIVE HERO PREMIUM V1
   ========================================================= */


/* HERO CUANDO HAY PARTIDO EN VIVO */

.public-dashboard
.public-hero-pro:has(.public-live-v2) {
  min-height: 0;

  padding:
    17px 17px 15px;

  border-color:
    rgba(103,137,255,.28);

  background:
    radial-gradient(
      circle at 3% 0%,
      rgba(86,73,255,.56),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 50%,
      rgba(34,103,220,.28),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #3035b6 0%,
      #152270 52%,
      #07142e 100%
    );

  box-shadow:
    0 16px 34px
    rgba(0,0,0,.20),
    inset 0 1px 0
    rgba(255,255,255,.07);
}


.public-dashboard
.public-live-v2 {
  position: relative;
  z-index: 2;

  width: 100%;

  display: grid;
  gap: 14px;
}


/* =========================================================
   CABECERA
   ========================================================= */

.public-dashboard
.public-live-v2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


.public-dashboard
.public-live-v2-badge {
  min-height: 31px;

  padding:
    0 11px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  border:
    1px solid
    rgba(255,94,105,.40);

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,71,87,.98),
      rgba(236,52,75,.96)
    );

  color:
    #ffffff;

  box-shadow:
    0 6px 18px
    rgba(239,68,68,.24);

  font-size: 9px;
  line-height: 1;
  font-weight: 1000;

  letter-spacing:
    .05em;
}


.public-dashboard
.public-live-v2-badge > i {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius:
    50%;

  background:
    #ffffff;

  box-shadow:
    0 0 0 4px
    rgba(255,255,255,.14);

  animation:
    publicLivePulse 1.5s
    ease-in-out infinite;
}


@keyframes publicLivePulse {

  0%,
  100% {
    opacity: 1;

    transform:
      scale(1);
  }

  50% {
    opacity: .50;

    transform:
      scale(.76);
  }

}


.public-dashboard
.public-live-v2-meta {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 6px;

  color:
    #bacbff;

  font-size: 8px;
  line-height: 1;
  font-weight: 850;

  white-space: nowrap;
}


.public-dashboard
.public-live-v2-meta > i {
  width: 3px;
  height: 3px;

  border-radius:
    50%;

  background:
    #6686d9;
}


/* =========================================================
   PARTIDO
   ========================================================= */

.public-dashboard
.public-live-v2-stage {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    104px
    minmax(0,1fr);

  align-items: center;

  gap: 7px;
}


.public-dashboard
.public-live-v2-team {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 7px;

  text-align: center;
}


.public-dashboard
.public-live-v2-logo {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border:
    2px solid
    rgba(255,255,255,.88);

  border-radius:
    50%;

  background:
    #ffffff;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.22);
}


.public-dashboard
.public-live-v2-logo img,

.public-dashboard
.public-live-v2-logo .team-flag-img {
  width: 50px;
  height: 50px;

  display: block;

  object-fit: cover;

  border-radius:
    50%;
}


.public-dashboard
.public-live-v2-team > strong {
  width: 100%;

  overflow: hidden;

  color:
    #ffffff;

  font-size: 13px;
  line-height: 1.1;
  font-weight: 950;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   MARCADOR CENTRAL
   ========================================================= */

.public-dashboard
.public-live-v2-score {
  min-height: 94px;

  padding:
    8px 8px;

  box-sizing:
    border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(130,158,255,.22);

  border-radius:
    18px;

  background:
    linear-gradient(
      155deg,
      rgba(27,48,125,.78),
      rgba(9,23,65,.70)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.06),
    0 8px 20px
    rgba(0,0,0,.13);
}


.public-dashboard
.public-live-v2-set {
  color:
    #9fb7ff;

  font-size: 7px;
  line-height: 1;
  font-weight: 1000;

  letter-spacing:
    .12em;
}


.public-dashboard
.public-live-v2-points {
  margin:
    5px 0 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
}


.public-dashboard
.public-live-v2-points b {
  min-width: 31px;

  color:
    #ffffff;

  font-size: 31px;
  line-height: .95;
  font-weight: 1000;

  letter-spacing:
    -.05em;

  text-align: center;
}


.public-dashboard
.public-live-v2-points i {
  color:
    #7195ff;

  font-size: 18px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
}


.public-dashboard
.public-live-v2-score small {
  color:
    #cbd7ff;

  font-size: 8px;
  line-height: 1;
  font-weight: 850;
}


/* =========================================================
   PIE
   ========================================================= */

.public-dashboard
.public-live-v2-foot {
  min-height: 31px;

  padding:
    0 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  border:
    1px solid
    rgba(117,148,226,.14);

  border-radius:
    11px;

  background:
    rgba(5,17,47,.24);
}


.public-dashboard
.public-live-v2-foot > span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color:
    #c6d5fb;

  font-size: 8px;
  font-weight: 800;
}


.public-dashboard
.public-live-v2-foot > span > i {
  width: 6px;
  height: 6px;

  border-radius:
    50%;

  background:
    #22d3ee;

  box-shadow:
    0 0 0 3px
    rgba(34,211,238,.10);
}


.public-dashboard
.public-live-v2-foot > strong {
  color:
    #8facf7;

  font-size: 8px;
  font-weight: 950;

  letter-spacing:
    .05em;
}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width:430px) {

  .public-dashboard
  .public-hero-pro:has(.public-live-v2) {
    padding:
      16px 15px 14px;
  }


  .public-dashboard
  .public-live-v2 {
    gap: 12px;
  }


  .public-dashboard
  .public-live-v2-stage {
    grid-template-columns:
      minmax(0,1fr)
      96px
      minmax(0,1fr);

    gap: 5px;
  }


  .public-dashboard
  .public-live-v2-logo {
    width: 54px;
    height: 54px;
  }


  .public-dashboard
  .public-live-v2-logo img,

  .public-dashboard
  .public-live-v2-logo .team-flag-img {
    width: 47px;
    height: 47px;
  }


  .public-dashboard
  .public-live-v2-team > strong {
    font-size: 12px;
  }


  .public-dashboard
  .public-live-v2-score {
    min-height: 88px;

    border-radius:
      16px;
  }


  .public-dashboard
  .public-live-v2-points b {
    min-width: 28px;

    font-size: 28px;
  }

}


/* =========================================================
   LIGHT
   Hero En Vivo conserva identidad oscura
   ========================================================= */

html[data-theme="light"]
.public-dashboard
.public-hero-pro:has(.public-live-v2) {
  border-color:
    rgba(81,113,220,.30);

  box-shadow:
    0 14px 30px
    rgba(25,45,100,.17),
    inset 0 1px 0
    rgba(255,255,255,.07);
}

/* =========================================================
   LIGAYA PUBLIC LIVE CTA V1
   ========================================================= */

.public-dashboard
.public-live-v2-open {
  height: 25px;

  padding:
    0 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  flex-shrink: 0;

  border:
    1px solid
    rgba(111,151,255,.30);

  border-radius:
    8px;

  background:
    linear-gradient(
      135deg,
      rgba(75,112,255,.26),
      rgba(38,76,185,.18)
    );

  color:
    #dce7ff;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.06);

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}


.public-dashboard
.public-live-v2-open > span {
  font-size: 7px;
  line-height: 1;
  font-weight: 1000;

  letter-spacing:
    .07em;
}


.public-dashboard
.public-live-v2-open > b {
  color:
    #7fa5ff;

  font-size: 12px;
  line-height: 1;
  font-weight: 900;

  transition:
    transform .18s ease;
}


.public-dashboard
.public-live-v2-open:hover {
  border-color:
    rgba(123,161,255,.48);

  background:
    linear-gradient(
      135deg,
      rgba(78,119,255,.38),
      rgba(39,80,199,.26)
    );
}


.public-dashboard
.public-live-v2-open:hover > b {
  transform:
    translateX(2px);
}


.public-dashboard
.public-live-v2-open:active {
  transform:
    scale(.96);
}


/* MOVIL */

@media (max-width:430px) {

  .public-dashboard
  .public-live-v2-open {
    height: 26px;

    padding:
      0 9px;
  }


  .public-dashboard
  .public-live-v2-open > span {
    font-size: 7.5px;
  }

}


/* LIGHT:
   El hero en vivo permanece oscuro,
   por lo que conservamos el mismo CTA.
*/

html[data-theme="light"]
.public-dashboard
.public-live-v2-open {
  border-color:
    rgba(128,161,255,.34);

  color:
    #edf3ff;
}

/* =========================================================
   LIGAYA FIXTURE LIVE STATUS TUNING V1
   Ajuste visual del bloque "En vivo" en Fixture
   ========================================================= */

.fixture-page .match-status-view{
    margin-top: 14px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 16px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
}

.fixture-page .match-status-view.live{
    background: linear-gradient(180deg, #3b0d12 0%, #54111a 100%);
    color: #ffd9de;
    border: 1px solid rgba(255, 90, 110, .35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 22px rgba(127, 29, 29, .22);
}

.fixture-page .match-status-view.live strong,
.fixture-page .match-status-view.live span{
    color: inherit;
}

.fixture-page .match-status-view.live::before{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff4d5f;
    box-shadow:
        0 0 0 4px rgba(255, 77, 95, .14),
        0 0 14px rgba(255, 77, 95, .55);
    flex: 0 0 auto;
}

/* LIGHT */
html[data-theme="light"] .fixture-page .match-status-view.live{
    background: linear-gradient(180deg, #ffe4e6 0%, #ffd7db 100%);
    color: #be123c;
    border: 1px solid #f5a3af;
    box-shadow: 0 8px 18px rgba(190, 24, 55, .10);
}

html[data-theme="light"] .fixture-page .match-status-view.live::before{
    background: #ef4444;
    box-shadow:
        0 0 0 4px rgba(239, 68, 68, .12),
        0 0 10px rgba(239, 68, 68, .25);
}

/* MOVIL */
@media (max-width: 430px){
    .fixture-page .match-status-view{
        min-height: 42px;
        padding: 9px 12px;
        border-radius: 14px;
        font-size: 12px;
        gap: 8px;
    }

    .fixture-page .match-status-view.live::before{
        width: 9px;
        height: 9px;
    }
}


/* =========================================================
   LIGAYA FIXTURE LIVE NO PULSE V1
   ========================================================= */

.fixture-page
.match-card-pro.is-live {
  animation:
    none !important;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.10) !important;
}


/* LIGHT */

html[data-theme="light"]
.fixture-page
.match-card-pro.is-live {
  box-shadow:
    0 8px 20px
    rgba(15,23,42,.06) !important;
}

/* =========================================================
   LIGAYA FIXTURE LIGHT DEPTH V3
   ========================================================= */


/* =========================================================
   FASE
   ========================================================= */

html[data-theme="light"]
.fixture-page
.fixture-phase-header {
  border-color:
    #c8daee;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f1f6fc 100%
    );

  box-shadow:
    0 8px 18px
    rgba(30,64,110,.075);
}


html[data-theme="light"]
.fixture-page
.fixture-phase-icon {
  border-color:
    #bcd4f4;

  background:
    linear-gradient(
      145deg,
      #edf5ff,
      #e2efff
    );

  color:
    #2869d9;
}


html[data-theme="light"]
.fixture-page
.fixture-phase-header small {
  color:
    #52749b;
}


html[data-theme="light"]
.fixture-page
.fixture-phase-header strong {
  color:
    #12243a;
}


html[data-theme="light"]
.fixture-page
.fixture-phase-status {
  border-color:
    #b7d1f7;

  background:
    #e8f2ff;

  color:
    #2866ca;

  font-weight:
    950;
}


html[data-theme="light"]
.fixture-page
.fixture-phase-count {
  color:
    #526c87;
}


/* =========================================================
   RONDAS
   ========================================================= */

html[data-theme="light"]
.fixture-page
.fixture-round-header {
  border-color:
    #cbdced;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f3f7fc 100%
    );

  box-shadow:
    0 7px 17px
    rgba(32,57,92,.065);
}


html[data-theme="light"]
.fixture-page
.fixture-round-icon {
  border-color:
    #c7dbf8;

  background:
    #edf5ff;

  color:
    #326ddd;
}


html[data-theme="light"]
.fixture-page
.fixture-round-title {
  color:
    #14243a;
}


html[data-theme="light"]
.fixture-page
.fixture-round-header small,
html[data-theme="light"]
.fixture-page
.fixture-round-meta {
  color:
    #5d7691;
}


/* =========================================================
   PARTIDO
   ========================================================= */

html[data-theme="light"]
.fixture-page
.match-card-pro {
  border-color:
    #cadbea;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f6f9fd 100%
    );

  box-shadow:
    0 9px 20px
    rgba(27,53,87,.075);
}


/* PARTIDO EN VIVO:
   acento sin glow/pulso
*/

html[data-theme="light"]
.fixture-page
.match-card-pro.is-live {
  border-color:
    #efb2b9;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fff7f8 100%
    );

  box-shadow:
    0 9px 20px
    rgba(103,42,52,.07) !important;
}


/* HORA */

html[data-theme="light"]
.fixture-page
.match-pro-time,
html[data-theme="light"]
.fixture-page
.match-time {
  border-color:
    #bdd5ff;

  background:
    #edf4ff;

  color:
    #2e68d5;
}


/* BADGES */

html[data-theme="light"]
.fixture-page
.match-status {
  border:
    1px solid
    #cbd9e9;

  background:
    #edf3f9;

  color:
    #526983;
}


html[data-theme="light"]
.fixture-page
.match-status.en-vivo {
  border-color:
    #f1b1ba;

  background:
    #fff0f2;

  color:
    #c53043;
}


/* VS */

html[data-theme="light"]
.fixture-page
.match-vs {
  background:
    linear-gradient(
      145deg,
      #5a67ff,
      #4055ec
    );

  color:
    #ffffff;

  box-shadow:
    0 7px 16px
    rgba(69,84,225,.22);
}


/* EQUIPOS */

html[data-theme="light"]
.fixture-page
.match-team strong,
html[data-theme="light"]
.fixture-page
.match-team h3 {
  color:
    #13243a;
}


/* =========================================================
   BARRA EN VIVO
   ========================================================= */

html[data-theme="light"]
.fixture-page
.match-status-view.live {
  border-color:
    #ee8f9c;

  background:
    linear-gradient(
      180deg,
      #ffe7ea 0%,
      #ffdce1 100%
    );

  color:
    #b91c3b;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.85);
}


html[data-theme="light"]
.fixture-page
.match-status-view.live::before {
  background:
    #ef4055;

  box-shadow:
    0 0 0 3px
    rgba(239,64,85,.12);
}

/* =========================================================
   LIGAYA FIXTURE LIGHT STATUS STRONG V1
   ========================================================= */


/* =========================================================
   FASE - EN CURSO
   ========================================================= */

html[data-theme="light"]
.fixture-page
.fixture-phase-status.is-active,

html[data-theme="light"]
.fixture-page
.fixture-phase-status {
  border:
    1px solid
    #3f7ee8 !important;

  background:
    linear-gradient(
      135deg,
      #3778e7 0%,
      #2864d4 100%
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 5px 12px
    rgba(37,99,235,.18);

  font-weight:
    1000;
}


/* =========================================================
   BADGE SUPERIOR DEL PARTIDO - EN VIVO
   ========================================================= */

html[data-theme="light"]
.fixture-page
.match-status.en-vivo {
  border:
    1px solid
    #e7465b !important;

  background:
    linear-gradient(
      135deg,
      #ef4b60 0%,
      #d9324d 100%
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 5px 12px
    rgba(218,50,76,.17);
}


/* =========================================================
   BARRA INFERIOR - EN VIVO
   ========================================================= */

html[data-theme="light"]
.fixture-page
.match-status-view.live {
  border:
    1px solid
    #e83c54 !important;

  background:
    linear-gradient(
      135deg,
      #ef455c 0%,
      #d82946 100%
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 6px 15px
    rgba(202,38,64,.15) !important;

  font-weight:
    950;
}


/* Punto indicador */

html[data-theme="light"]
.fixture-page
.match-status-view.live::before {
  background:
    #ffffff !important;

  box-shadow:
    0 0 0 4px
    rgba(255,255,255,.17) !important;
}


/* =========================================================
   TARJETA EN VIVO
   Mantener acento rojo discreto
   ========================================================= */

html[data-theme="light"]
.fixture-page
.match-card-pro.is-live {
  border-color:
    #efa1ac !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fff9fa 100%
    ) !important;

  box-shadow:
    0 9px 20px
    rgba(81,38,46,.07) !important;
}

/* =========================================================
   LIGAYA MENU EN VIVO SVG V1
   ========================================================= */

.menu-live-icon {
  width: 22px;
  height: 22px;

  display: block;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;

  overflow: visible;
}


/* Punto central de transmisión */

.menu-live-icon circle {
  fill: currentColor;
  stroke: none;
}


/* Barra inferior */

.bottom-nav
.bottom-item
> div {
  display: grid;
  place-items: center;
}


.bottom-nav
.bottom-item
.menu-live-icon {
  width: 23px;
  height: 23px;
}


/* Menú lateral */

.side-nav
.nav-item
.menu-live-icon {
  width: 21px;
  height: 21px;

  flex-shrink: 0;
}


/*
 * Cuando En Vivo está seleccionado,
 * mantiene el color activo del menú.
 */

.bottom-item.active
.menu-live-icon,

.nav-item.active
.menu-live-icon {
  filter:
    drop-shadow(
      0 0 5px
      currentColor
    );
}


/* =========================================================
   LIGAYA PUBLIC SINGLE CARD FULL WIDTH V1

   1 elemento  = ancho completo
   2+ elementos = mantiene carrusel actual
   ========================================================= */

/* =========================================================
   PROXIMOS ENCUENTROS
   ========================================================= */

.public-dashboard
.public-next-scroller:has(
  > .public-next-match-card-compact:only-child
) {
  padding-right: 1px !important;
}

.public-dashboard
.public-next-scroller
> .public-next-match-card-compact:only-child {
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* =========================================================
   EQUIPOS PARTICIPANTES POR CATEGORIA
   ========================================================= */

.public-dashboard
.public-category-teams-scroller:has(
  > .public-category-team-summary:only-child
) {
  padding-right: 1px !important;
}

.public-dashboard
.public-category-teams-scroller
> .public-category-team-summary:only-child {
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* =========================================================
   LIDERES POR CATEGORIA
   ========================================================= */

.public-dashboard
.public-leaders-scroller:has(
  > .public-leader-card:only-child
) {
  padding-right: 1px !important;
}

.public-dashboard
.public-leaders-scroller
> .public-leader-card:only-child {
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* =========================================================
   CUANDO HAY VARIOS

   No se modifica ninguna medida existente.
   Conservan 86%, 245px, 250px, etc.
   ========================================================= */



/* =========================================================
   LIGAYA PUBLIC SQUAD DARK V1
   Modal Plantel - Tema oscuro
   ========================================================= */

html:not([data-theme="light"])
.public-squad-overlay {
  background: rgba(2, 8, 23, .78) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

html:not([data-theme="light"])
.public-squad-modal {
  border: 1px solid rgba(95, 135, 190, .22) !important;
  background: #091827 !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .52),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* HEADER */

html:not([data-theme="light"])
.public-squad-header {
  border-bottom: 1px solid rgba(103, 151, 255, .18) !important;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(34, 211, 238, .16),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #3158e8 0%,
      #173477 48%,
      #0c2638 100%
    ) !important;
}

html:not([data-theme="light"])
.public-squad-flag {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html:not([data-theme="light"])
.public-squad-team small {
  color: #a9c5ff !important;
}

html:not([data-theme="light"])
.public-squad-team h2 {
  color: #ffffff !important;
}

html:not([data-theme="light"])
.public-squad-team p {
  color: #d2def2 !important;
}

/* BOTON CERRAR */

html:not([data-theme="light"])
.public-squad-close {
  border: 1px solid rgba(164, 194, 255, .23) !important;
  background: rgba(8, 28, 52, .54) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.16) !important;
}

html:not([data-theme="light"])
.public-squad-close:hover {
  border-color: rgba(111, 169, 255, .48) !important;
  background: rgba(30, 64, 175, .32) !important;
}

/* CUERPO */

html:not([data-theme="light"])
.public-squad-body {
  background:
    linear-gradient(
      180deg,
      #091827 0%,
      #071421 100%
    ) !important;
}

/* TARJETA JUGADOR */

html:not([data-theme="light"])
.public-squad-player {
  border: 1px solid rgba(111, 148, 196, .18) !important;
  background:
    linear-gradient(
      145deg,
      rgba(19, 43, 70, .96),
      rgba(10, 29, 48, .98)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 24px rgba(0,0,0,.10) !important;
}

html:not([data-theme="light"])
.public-squad-avatar {
  border: 1px solid rgba(88, 137, 255, .22) !important;
  background:
    linear-gradient(
      145deg,
      rgba(52, 99, 235, .25),
      rgba(37, 99, 235, .10)
    ) !important;
  color: #8fb3ff !important;
}

html:not([data-theme="light"])
.public-squad-player-info strong {
  color: #f8fafc !important;
}

html:not([data-theme="light"])
.public-squad-player-info span {
  color: #8ea5c0 !important;
}

/* ESTADO DEL JUGADOR */

html:not([data-theme="light"])
.public-squad-status {
  border: 1px solid rgba(52, 211, 153, .18) !important;
  background: rgba(16, 185, 129, .10) !important;
  color: #6ee7b7 !important;
}

/* PLANTEL VACIO */

html:not([data-theme="light"])
.public-squad-empty h3 {
  color: #f8fafc !important;
}

html:not([data-theme="light"])
.public-squad-empty p {
  color: #8da3bd !important;
}

/* SCROLL */

html:not([data-theme="light"])
.public-squad-body {
  scrollbar-color: #294665 #091827;
}

html:not([data-theme="light"])
.public-squad-body::-webkit-scrollbar-track {
  background: #091827;
}

html:not([data-theme="light"])
.public-squad-body::-webkit-scrollbar-thumb {
  background: #294665 !important;
  border-radius: 999px;
}


/* =========================================================
   LIGAYA PUSH WELCOME DIALOG V1
   ========================================================= */

.ligaya-push-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  padding: 18px;
  display: grid;
  place-items: center;
  background: rgba(2, 8, 23, .78);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}


.ligaya-push-welcome {
  position: relative;
  width: min(100%, 390px);
  padding: 26px 22px 20px;
  box-sizing: border-box;
  overflow: hidden;

  border:
    1px solid rgba(97, 142, 205, .23);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(59,130,246,.22),
      transparent 34%
    ),
    linear-gradient(
      160deg,
      #102943 0%,
      #091827 58%,
      #07131f 100%
    );

  box-shadow:
    0 32px 90px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.04);

  text-align: center;
}


.ligaya-push-welcome-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;

  border:
    1px solid rgba(148,163,184,.18);
  border-radius: 13px;
  background: rgba(255,255,255,.05);
  color: #dce8f8;
  font-size: 25px;
  cursor: pointer;
}


.ligaya-push-welcome-icon {
  width: 66px;
  height: 66px;
  margin: 4px auto 16px;
  display: grid;
  place-items: center;
  border-radius: 22px;

  border:
    1px solid rgba(96,165,250,.25);

  background:
    linear-gradient(
      145deg,
      rgba(59,130,246,.28),
      rgba(37,99,235,.10)
    );

  color: #87afff;
}


.ligaya-push-welcome-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.ligaya-push-welcome-kicker {
  color: #74a2ff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
}


.ligaya-push-welcome h2 {
  margin: 8px 20px 0;
  color: #ffffff;
  font-size: 23px;
  line-height: 1.15;
  font-weight: 950;
}


.ligaya-push-welcome > p {
  margin: 10px auto 0;
  max-width: 310px;
  color: #94a9c3;
  font-size: 12px;
  line-height: 1.5;
}


.ligaya-push-welcome-features {
  margin: 18px 0;
  display: grid;
  gap: 7px;
  text-align: left;
}


.ligaya-push-welcome-features span {
  padding: 9px 11px;
  border:
    1px solid rgba(148,163,184,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: #c5d3e5;
  font-size: 11px;
  font-weight: 750;
}


.ligaya-push-welcome-message {
  min-height: 0;
  margin-bottom: 9px;
  color: #fca5a5;
  font-size: 10px;
  font-weight: 750;
}


.ligaya-push-welcome-primary,
.ligaya-push-welcome-secondary {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}


.ligaya-push-welcome-primary {
  border: 0;
  background:
    linear-gradient(
      135deg,
      #4278fb,
      #2858dc
    );
  color: #ffffff;
  box-shadow:
    0 12px 26px rgba(37,99,235,.25);
}


.ligaya-push-welcome-primary:disabled {
  opacity: .60;
  cursor: default;
}


.ligaya-push-welcome-secondary {
  margin-top: 7px;
  border: 0;
  background: transparent;
  color: #8399b3;
}


html[data-theme="light"]
.ligaya-push-welcome-overlay {
  background: rgba(15,23,42,.52);
}


html[data-theme="light"]
.ligaya-push-welcome {
  border-color: #dbe6f2;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(59,130,246,.12),
      transparent 34%
    ),
    linear-gradient(
      160deg,
      #ffffff,
      #f5f8fd
    );
}


html[data-theme="light"]
.ligaya-push-welcome h2 {
  color: #0f172a;
}


html[data-theme="light"]
.ligaya-push-welcome > p {
  color: #64748b;
}


html[data-theme="light"]
.ligaya-push-welcome-features span {
  border-color: #e3ebf5;
  background: #f8fafc;
  color: #334155;
}


@media (max-width: 430px) {

  .ligaya-push-welcome-overlay {
    padding: 14px;
  }

  .ligaya-push-welcome {
    padding: 23px 18px 17px;
    border-radius: 24px;
  }

  .ligaya-push-welcome h2 {
    font-size: 21px;
  }

}

/* =========================================================
   LIGAYA PUSH SETTINGS PANEL V1
   ========================================================= */

.public-push-settings-button {
  position: relative;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: rgba(255,255,255,.72);
  color: #475569;

  box-shadow:
    0 4px 14px rgba(15,23,42,.08);

  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.public-push-settings-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-push-settings-status {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  border: 2px solid #0b162c;
}

.public-push-settings-button.is-active .public-push-settings-status {
  background: #34d399;
}

.ligaya-push-settings {
  width: min(100%,430px);
}

.ligaya-push-settings-list {
  margin: 19px 0 14px;
  display: grid;
  gap: 8px;
  text-align: left;
}

.ligaya-push-setting-item {
  min-height: 61px;
  padding: 10px 11px 10px 13px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(148,163,184,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.028);
  cursor: pointer;
}

.ligaya-push-setting-item > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ligaya-push-setting-item strong {
  color: #e8f0fb;
  font-size: 11px;
  font-weight: 900;
}

.ligaya-push-setting-item small {
  color: #8197b2;
  font-size: 9px;
  line-height: 1.35;
}

.ligaya-push-setting-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ligaya-push-setting-item i {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #26364e;
  transition: .2s ease;
}

.ligaya-push-setting-item i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #a8b7c9;
  transition: .2s ease;
}

.ligaya-push-setting-item input:checked + i {
  background: linear-gradient(135deg,#4278fb,#2858dc);
}

.ligaya-push-setting-item input:checked + i::after {
  transform: translateX(18px);
  background: #fff;
}

.ligaya-push-settings-message {
  margin-top: 3px;
  margin-bottom: 10px;
}

html[data-theme="light"] .public-push-settings-button {
  border-color: #d5e3f3;
  background: linear-gradient(145deg,#fff,#f3f7fc);
  color: #376ad8;
}

html[data-theme="light"] .public-push-settings-status {
  border-color: #fff;
}

html[data-theme="light"] .ligaya-push-setting-item {
  border-color: #e3ebf5;
  background: #f8fafc;
}

html[data-theme="light"] .ligaya-push-setting-item strong {
  color: #1e293b;
}

html[data-theme="light"] .ligaya-push-setting-item small {
  color: #64748b;
}




.public-push-settings-button:hover {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow:
    0 7px 18px rgba(15,23,42,.12);
}

.public-push-settings-button:active {
  transform: scale(.96);
}

.public-push-settings-button:focus-visible {
  outline: 3px solid rgba(37,99,235,.18);
  outline-offset: 2px;
}

:root[data-theme="dark"]
.public-push-settings-button {
  background:
    linear-gradient(
      145deg,
      #172b45,
      #102239
    );

  color: #f8fafc;
  border-color: #294d78;

  box-shadow:
    0 6px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}

:root[data-theme="dark"]
.public-push-settings-button:hover {
  background:
    linear-gradient(
      145deg,
      #1d3859,
      #142a46
    );

  border-color: #38648f;
}

@media (max-width: 768px) {

  .public-push-settings-button {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

}

/* =========================================================
   LIGAYA TOPBAR MOBILE COMPACT V1
   ========================================================= */

@media (max-width: 768px) {

  .topbar-actions {
    gap: 7px;
  }

  .theme-toggle-btn,
  .public-push-settings-button {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  #themeToggleIcon {
    font-size: 15px;
  }

  .public-push-settings-button svg {
    width: 19px;
    height: 19px;
  }

  .public-push-settings-status {
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
  }

}

/* =========================================================
   LIGAYA PUSH SWITCH TAP POLISH V1
   ========================================================= */

.ligaya-push-setting-item,
.ligaya-push-setting-item * {
  -webkit-tap-highlight-color: transparent;
}

.ligaya-push-setting-item {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.ligaya-push-setting-item input:focus {
  outline: none;
}

.ligaya-push-setting-item input:focus-visible + i {
  box-shadow:
    0 0 0 3px rgba(66,120,251,.22);
}