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

* { box-sizing: border-box; }

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 20px;
  background: linear-gradient(45deg, red, black, red, black);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
  color: #e0e0e0;
  overflow-x: hidden;
}

@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Reduce motion si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
}

/* Barra de progreso */
#progress {
  position: sticky; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, #ff4444, #ffffff);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
  z-index: 1000;
}
#progress.active { transform: scaleX(1); }

/* Banner offline */
#offline-banner {
  position: sticky; top: 0; z-index: 1000;
  background: #9a2a2a; color: #fff; text-align: center;
  padding: 6px 10px; font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.2);
}

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(30,35,38,.95);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  z-index: 1001; max-width: 90vw;
}

/* Encabezado */
header { text-align: center; margin-bottom: 20px; }
header h1 {
  font-size: 2.5em; color: white; font-family: 'Oswald', sans-serif; font-weight: bold;
  text-shadow: 4px 4px 4px rgba(0,0,0,.4);
  animation: slideIn 1.2s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Footer con botón centrado */
.footer-actions{
  display: flex;
  justify-content: center;   /* centra horizontal */
  align-items: center;       /* alinea vertical si hay más altura */
  padding: 16px 12px;
  gap: 12px;
}
.footer-actions .button{
  margin: 0 auto;            /* por si algún contenedor usa text-align distinto */
}

main { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
section {
  margin-bottom: 20px; background: rgba(30,35,38,.95);
  padding: 15px; border-radius: 16px; width: 100%; max-width: 600px;
}

#date-selector {
  display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 15px; background: rgba(255,255,255,.05); border-radius: 12px;
  box-shadow: 4px 4px 4px rgba(0,0,0,.4); transition: transform .3s ease;
}
#date-selector:hover { transform: translateY(-5px); }
#date-selector label {
  font-size: 1.2em; color: white; font-family: 'Oswald', sans-serif;
  text-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
#fecha-select {
  padding: 10px; font-size: 1.1em; border: 2px solid white; border-radius: 8px; background: #2e2e2e; color: #e0e0e0; min-width: 180px;
  font-family: 'Roboto', sans-serif; transition: border-color .3s ease, background .3s ease;
}
#fecha-select:focus { border-color: #ff4444; background: #3a3a3a; outline: none; }

#date-selector button,
.button {
  padding: 10px 20px; font-size: 1.1em; background: #ff4444; color: white; border: 2px solid black; border-radius: 8px; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-weight: bold; text-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transition: background .3s ease, transform .2s ease, box-shadow .3s ease;
}
#date-selector button:hover, .button:hover { background: #ff6666; transform: translateY(-2px); box-shadow: 4px 4px 4px rgba(0,0,0,.4); }

#race-list, #results { box-shadow: 4px 4px 4px rgba(0,0,0,.4); transition: transform .3s ease; }
#race-list:hover, #results:hover { transform: translateY(-5px); }

#race-list h2, #results h2 {
  font-size: 1.5em; color: white; font-family: 'Oswald', sans-serif;
  margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 2px 2px 2px rgba(0,0,0,.4);
}

#race-list ul {
  list-style: none; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 600px; margin: 0 auto;
}
#race-list li {
  padding: 8px; background: #2c2c2c; border: 2px solid white; border-radius: 8px; cursor: pointer; font-size: .9em; text-align: center;
  font-family: 'Oswald', sans-serif; color: white; text-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transition: background .3s ease, transform .2s ease, border-color .3s ease; max-width: 160px;
}
#race-list li:hover { background: #4a4a4a; transform: scale(1.03); border-color: #ff4444; }
#race-list li.active { outline: 2px solid #ffdd00; border-color: #ffdd00; }

.results-toolbar {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
#results-search {
  flex: 1 1 220px; max-width: 280px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid #555; background:#2e2e2e; color: #fff;
}

.meta-row {
  display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: #ccc; margin: 8px 0 6px;
}
#selected-pill {
  background: #30363c; border: 1px solid #495057; border-radius: 999px; padding: 4px 10px;
}
#last-updated { opacity: .9; }

.table-container { overflow-x: auto; padding: 5px; }

table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: #2e2e2e; border-radius: 12px; overflow: hidden;
  box-shadow: 4px 4px 4px rgba(0,0,0,.4);
}
th, td { padding: 12px; text-align: center; border: 1px solid #444; }
th {
  background: #ff4444; color: white; font-family: 'Oswald', sans-serif; font-weight: bold; font-size: 1em; text-transform: uppercase;
  text-shadow: 2px 2px 2px rgba(0,0,0,.4);
  position: sticky; top: 0; z-index: 1; /* sticky head */
}
td { font-size: .9em; color: #e0e0e0; font-family: 'Roboto', sans-serif; }
tbody tr:first-child { background: #ff6666; color: white; font-weight: bold; }
tbody tr:nth-child(odd) { background: #3a3a3a; }
tbody tr:nth-child(even) { background: #2e2e2e; }
tbody tr:hover { background: #555; transition: background .2s ease; }
.penalty { color: #ffdd00; font-weight: bold; }

/* Resaltado de filas actualizadas (si usás highlight.js) */
.updated-race { animation: flashRow 1.2s ease-in-out 2; }
@keyframes flashRow {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/* Skeleton */
.skeleton { margin: 8px 0; }
.skeleton .row {
  height: 28px; background: linear-gradient(90deg, #2c2c2c 25%, #3a3a3a 37%, #2c2c2c 63%);
  background-size: 400% 100%; animation: shimmer 1.2s infinite linear; border-radius: 6px; margin: 8px 0;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Responsive */
@media (max-width: 768px) {
  header h1 { font-size: 2em; }
  #date-selector { flex-direction: column; gap: 12px; }
  #date-selector label, #fecha-select, #date-selector button { width: 100%; max-width: 350px; }
  #race-list ul { grid-template-columns: repeat(3, 1fr); max-width: 500px; }
  table { font-size: .85em; }
  th, td { padding: 8px; }
}

@media (max-width: 480px) {
  header h1 { font-size: 1.6em; }
  #race-list h2, #results h2 { font-size: 1.2em; }
  #race-list ul { grid-template-columns: repeat(3, 1fr); max-width: 400px; }
  #race-list li { max-width: 120px; font-size: .8em; padding: 6px; }
  table { font-size: .75em; }
  th, td { padding: 6px; }
}

/* Créditos */
#creditos { text-align: center; margin-top: 20px; font-family: 'Roboto', sans-serif; }
#creditos a { color: #999; font-size: .9em; text-decoration: none; transition: color .3s ease; }
#creditos a:hover { color: #ff4444; text-decoration: underline; }