@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-main: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --elite-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html,
body,
#root,
button,
input,
select,
textarea,
a,
label,
table,
th,
td,
p,
span,
strong,
small,
div {
  font-family: var(--elite-font) !important;
}

body {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: -0.006em;
  line-height: 1.45;
}

/* Encabezado superior: más compacto y menos pesado */
.topbar {
  min-height: 62px !important;
  padding: 11px 24px !important;
}

.topbar-kicker,
.nav-section-title,
.table thead th,
.data-table thead th,
th {
  font-size: .69rem !important;
  font-weight: 600 !important;
  letter-spacing: .075em !important;
}

.topbar-title {
  font-size: .94rem !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  margin-top: 2px !important;
}

.user-chip,
.logout-btn,
.nav-link,
.btn,
button {
  font-weight: 500 !important;
}

/* Marca y menú lateral */
.app-sidebar {
  width: 246px !important;
  min-width: 246px !important;
}

.app-brand {
  padding: 20px 18px 16px !important;
  gap: 10px !important;
}

.brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
}

.brand-title strong {
  font-size: .98rem !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

.brand-title span,
.sidebar-footer {
  font-size: .72rem !important;
  font-weight: 400 !important;
}

.sidebar-nav {
  padding: 14px 12px !important;
}

.nav-link {
  min-height: 38px !important;
  padding: 9px 11px !important;
  border-radius: 13px !important;
  font-size: .83rem !important;
  letter-spacing: -.006em !important;
}

/* Contenido general */
.content-area {
  padding: 22px 24px !important;
}

.content-inner {
  max-width: 1480px !important;
}

.page-head {
  margin-bottom: 16px !important;
  gap: 14px !important;
}

.page-title-row {
  gap: 11px !important;
}

.page-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
}

h1,
.hero h1,
#hero-title {
  font-size: clamp(1.45rem, 2.05vw, 2rem) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}

h2,
.card h2,
.glass-card h2,
.filters-card h2 {
  font-size: clamp(1.05rem, 1.45vw, 1.35rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.024em !important;
}

h3,
.card h3,
.glass-card h3,
.modal-title,
.modal h3,
.card-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
}

.page-description,
.card p,
.glass-card p,
.hero p,
#hero-subtitle {
  font-size: .88rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.card,
.glass-card,
.filters-card,
.dashboard-card {
  padding: 16px !important;
  border-radius: 20px !important;
}

.grid {
  gap: 14px !important;
}

/* Formularios */
.form-label,
label,
.label,
.field-label {
  font-size: .76rem !important;
  font-weight: 500 !important;
  letter-spacing: -.004em !important;
}

.form-control,
input,
select,
textarea {
  font-size: .86rem !important;
  font-weight: 400 !important;
  min-height: 40px !important;
  border-radius: 14px !important;
}

textarea {
  line-height: 1.45 !important;
}

.btn,
button,
.primary-button,
.secondary-button,
.ghost-button,
.admin-link {
  font-size: .83rem !important;
  font-weight: 500 !important;
  letter-spacing: -.006em !important;
  min-height: 38px !important;
  border-radius: 14px !important;
}

.btn-sm,
button.btn-sm,
.icon-button {
  min-height: 34px !important;
  font-size: .78rem !important;
}

/* Tablas más finas y legibles */
.table-wrap,
.data-table-wrap,
.fixture-table-wrap {
  font-size: .86rem !important;
}

table,
.data-table,
.fixture-table {
  font-size: .86rem !important;
}

td,
.data-table td,
.fixture-table td {
  font-size: .84rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

th,
.data-table th,
.fixture-table th {
  font-size: .68rem !important;
  font-weight: 600 !important;
}

.data-table th,
.data-table td,
.fixture-table th,
.fixture-table td {
  padding: 10px 12px !important;
}

.badge,
.status-badge,
.standings-pos,
.scorer-total,
.category-pill,
.weekday-chip {
  font-weight: 500 !important;
}

/* Resultados y programación */
.match-date-block strong,
.match-teams-block strong,
.scorer-team-head strong,
.scorer-ranking-row strong,
.team-name,
.fixture-table strong {
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

.match-date-block span,
.match-teams-block span,
.scorer-team-head span,
.scorer-ranking-row span:not(.standings-pos) {
  font-size: .79rem !important;
  font-weight: 400 !important;
}

.match-result-main {
  padding: 13px 16px !important;
}

.result-match-list {
  gap: 12px !important;
  padding: 14px !important;
}

.score-input,
.match-score-editor input {
  font-size: .92rem !important;
  font-weight: 500 !important;
}

/* Modales: texto más liviano */
.modal-card,
.modal-panel,
.modal-content,
.dialog-card {
  font-size: .88rem !important;
}

.modal-card h2,
.modal-panel h2,
.modal-content h2,
.dialog-card h2 {
  font-size: 1.12rem !important;
  font-weight: 600 !important;
}

.modal-actions,
.form-actions {
  gap: 10px !important;
}

/* Dashboard / métricas */
.stat-card strong,
.stat-number,
.metric-value,
.score,
.pts,
.scorer-ranking-row b {
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
}

.stat-card strong,
.stat-number,
.metric-value {
  font-size: clamp(1.45rem, 2vw, 1.95rem) !important;
}

/* Portal público */
.page-shell,
.hero,
.filters-card,
.public-card,
.match-highlight {
  font-family: var(--elite-font) !important;
}

.hero .brand strong,
.brand strong,
.highlight-head strong,
.category-pill strong,
.scorer-name,
.pts,
.team-name {
  font-weight: 600 !important;
}

.hero .eyebrow,
.eyebrow,
.highlight-head span,
.section-kicker {
  font-weight: 500 !important;
  letter-spacing: .06em !important;
}

.score-board .score,
.score {
  font-size: clamp(1.4rem, 3vw, 2.3rem) !important;
  font-weight: 600 !important;
}

/* En móvil conservar claridad sin agrandar demasiado */
@media (max-width: 900px) {
  .app-sidebar {
    width: 100% !important;
    min-width: 0 !important;
  }
  .content-area {
    padding: 16px !important;
  }
  h1,
  .hero h1,
  #hero-title {
    font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
  }
  .page-description,
  .card p,
  .glass-card p {
    font-size: .84rem !important;
  }
}

/* Normalización final de pesos para evitar una interfaz demasiado pesada */
h1,h2,h3,h4,h5,h6,strong,b,
.card-title,.page-title,.section-title,.filter-copy h2,
.stat-card b,.hero-copy h1,.hero-copy strong,
.score-card strong,.category-name,.club-name,.team-title,
.table-title,.module-title,.view-title {
  font-weight: 600 !important;
}

small,.muted,.text-muted,.page-description,.card-subtitle,.helper-text {
  font-weight: 400 !important;
}

/* Ajuste de títulos del portal público sin perder impacto visual */
.hero-copy h1,
#hero-title {
  max-width: 980px;
}

.hero-copy p,
#hero-subtitle {
  max-width: 760px;
}