/* =================== Base =================== */
:root {
  --bg-dark-start:#0f172a; --bg-dark-end:#1e293b;
  --bg-light-start:#e0e7ff; --bg-light-end:#f3f4f6;
  --text-dark:#d1d5db; --text-light:#1f2937;
  --brand-500:#3b82f6; --brand-700:#1e40af; --brand-600:#2563eb;
}

* { box-sizing: border-box; }

body {
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(135deg, var(--bg-dark-start) 0%, var(--bg-dark-end) 100%);
  color: var(--text-dark);
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Modo claro aplicado al body */
body.light-mode {
  color: var(--text-light);
  background: linear-gradient(135deg, var(--bg-light-start) 0%, var(--bg-light-end) 100%);
}

/* =================== Header =================== */
.header {
  background: linear-gradient(90deg, #1e40af, #3b82f6);
  padding: 1.5rem;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  margin-bottom: 2rem;
}
.header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0,0,0,.2);
}

/* =================== Layout / Cards =================== */
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }

.card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(5px);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  margin-bottom: 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}

/* =================== Tabla =================== */
#tournamentTable { width: 100%; table-layout: fixed; }
#tournamentTable th, #tournamentTable td { word-break: break-word; }
#tournamentTable th { position: sticky; top: 0; z-index: 5; }

/* Hacer la tabla scrolleable en pantallas chicas */
@media (max-width: 640px) {
  .card > table { display: block; overflow-x: auto; }
}

/* =================== FullCalendar (dark) =================== */
.fc {
  color: #d1d5db;
  --fc-button-bg-color: var(--brand-600);
  --fc-button-border-color: var(--brand-700);
  --fc-button-hover-bg-color: var(--brand-700);
  --fc-button-active-bg-color: #1e3a8a;
}
.fc .fc-daygrid-day {
  background: #1f2937;
  border-color: #4b5563;
  transition: background .2s ease;
}
.fc .fc-daygrid-day:hover { background: #374151; }
.fc .fc-daygrid-day.fc-day-today { background: #1e3a8a; font-weight: 600; }
.fc .fc-col-header-cell {
  background: #374151;
  color: #d1d5db;
  border-color: #4b5563;
  font-weight: 500;
}
.fc .fc-event {
  color: #fff;
  font-size: 0.9em;
  border-radius: .375rem;
  padding: 2px 4px;
  transition: transform .2s ease, filter .2s ease;
}
.fc .fc-event:hover { transform: scale(1.05); filter: brightness(.9); }
.fc .fc-button {
  border-radius: .5rem;
  padding: .5rem 1rem;
  transition: transform .2s ease;
}
.fc .fc-button:hover { transform: translateY(-2px); }

/* =================== Colores de eventos =================== */
.event-blue   { background: #2563eb; border-color: #1e40af; }
.event-orange { background: #f97316; border-color: #ea580c; }
.event-green  { background: #16a34a; border-color: #15803d; }
.event-red    { background: #dc2626; border-color: #b91c1c; }
.event-purple { background: #9333ea; border-color: #7e22ce; }
.event-yellow { background: #eab308; border-color: #ca8a04; }

/* Leyenda de colores */
#legend { gap: .75rem; align-items: center; }
#legend .inline-flex { background: rgba(255,255,255,.06); padding: .35rem .6rem; border-radius: .5rem; }
body.light-mode #legend .inline-flex { background: rgba(0,0,0,.05); }

/* =================== Modal de ayuda =================== */
#helpModal { z-index: 1000; overflow-y: auto; padding: 1rem; }
#helpModal .bg-gray-800 {
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 1rem;
}

/* =================== Modo claro (componentes) =================== */
body.light-mode .fc {
  color: #374151;
  --fc-button-bg-color: #3b82f6;
  --fc-button-border-color: #1d4ed8;
  --fc-button-hover-bg-color: #1d4ed8;
  --fc-button-active-bg-color: #1e40af;
}
body.light-mode .fc .fc-daygrid-day { background: #f3f4f6; border-color: #d1d5db; }
body.light-mode .fc .fc-daygrid-day:hover { background: #e5e7eb; }
body.light-mode .fc .fc-daygrid-day.fc-day-today { background: #bfdbfe; }
body.light-mode .fc .fc-col-header-cell {
  background: #e5e7eb;
  color: #374151;
  border-color: #d1d5db;
}
body.light-mode .fc .fc-event { color: #1f2937; }
body.light-mode .card { background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb; }
body.light-mode .bg-gray-800 { background-color: #fff; }
body.light-mode .bg-gray-700 { background-color: #e5e7eb; }
body.light-mode .text-gray-300 { color: #4b5563; } /* contraste mejorado */
body.light-mode .border-gray-600 { border-color: #d1d5db; }
body.light-mode .hover\:bg-gray-700 { background-color: #d1d5db; }
body.light-mode input,
body.light-mode select {
  background-color: #fff;
  color: #1f2937;
  border-color: #d1d5db;
}
body.light-mode input:focus,
body.light-mode select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
body.light-mode table { background-color: #fff; }
body.light-mode thead { background-color: #e5e7eb; }
body.light-mode .hover\:bg-gray-700:hover { background-color: #d1d5db; }
body.light-mode footer {
  background-color: #f3f4f6;
  color: #1f2937;
  border-top: 1px solid #e5e7eb;
}
body.light-mode footer a { color: #3b82f6; }
body.light-mode footer a:hover { color: #1d4ed8; }

/* =================== Inputs y selects =================== */
input, select {
  border-radius: .5rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}

/* =================== Botones =================== */
button {
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
button:focus-visible, a:focus-visible, .language-btn:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* =================== Footer =================== */
footer {
  background-color: #1f2937;
  color: #d1d5db;
  padding: 1.5rem;
  border-top: 1px solid #4b5563;
  text-align: center;
  margin-top: 2rem;
}
footer a {
  color: #60a5fa;
  text-decoration: none;
  transition: color .2s ease;
}
footer a:hover {
  color: #3b82f6;
  text-decoration: underline;
}

/* =================== Selector de idioma =================== */
.language-switch { display: flex; gap: .5rem; align-items: center; }
.language-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background-color: var(--brand-600);
  color: #fff;
  font-size: 1.2rem;
  transition: transform .2s ease, background-color .2s ease;
  cursor: pointer;
  user-select: none;
}
.language-btn:hover { background-color: #1e40af; transform: scale(1.1); }
.language-btn.active { background-color: #1e3a8a; transform: scale(1.1); }

/* =================== Accesibilidad / motion =================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card:hover, .fc .fc-button:hover { transform: none !important; }
}

/* =================== Print =================== */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .header, .language-switch, #toggleTheme,
  #saveButton, #cancelEditButton, #exportButton, #importButton, #exportICS,
  #helpButton, #clearAllButton, #importFile,
  .card input, .card select, .card button,
  #helpModal { display: none !important; }
  #calendar, #tournamentTable { display: block; }
  a { color: #000 !important; text-decoration: none; }
}