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

:root {
  --bg: #131417;
  --surface: #1c1e23;
  --surface-2: #23262c;
  --linea: #2b2e35;
  --teal: #2bd9c4;
  --teal-suave: #1c9c8c;
  --azul: #3f8cff;
  --azul-suave: #2c62b3;
  --texto: #f1f1ee;
  --texto-tenue: #93959d;
  --rojo: #e0554a;
  --verde: #4cbf8a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, .display {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* --- Header --- */
.site-header {
  border-bottom: 1px solid var(--linea);
  padding: 14px 0;
  margin-bottom: 8px;
  position: relative;
  z-index: 30;
}
.site-header .wrap {
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img.logo-mini {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
}
.brand .display {
  font-size: 19px;
  color: var(--texto);
  line-height: 1;
}
.brand .display span { color: var(--teal); }

nav.mainnav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
nav.mainnav a.navlink { color: var(--texto-tenue); font-size: 15px; }
nav.mainnav a.navlink:hover { color: var(--texto); text-decoration: none; }
nav.mainnav a.navlink.active { color: var(--teal); }

/* --- Menú de usuario desplegable --- */
.user-menu { position: relative; }
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--linea);
  color: var(--texto);
  padding: 6px 12px 6px 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  border-radius: 999px;
}
.user-menu-btn .avatar-mini { width: 24px; height: 24px; }
.user-menu-btn .avatar-vacio-mini {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
}
.user-menu-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--linea);
  min-width: 190px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.user-menu.abierto .user-menu-panel { display: block; }
.user-menu-panel a {
  display: block;
  color: var(--texto);
  font-size: 14px;
  padding: 9px 10px;
}
.user-menu-panel a:hover { background: var(--surface-2); text-decoration: none; }
.user-menu-panel .separador { border-top: 1px solid var(--linea); margin: 6px 0; }
.user-menu-panel .salir { color: var(--rojo); }

.btn-ingresar {
  background: var(--teal);
  color: var(--bg);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
}
.btn-ingresar:hover { text-decoration: none; background: #4be8d4; }

/* --- Hero de Inicio --- */
.hero {
  padding: 40px 0 30px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.logo-hero {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero .display {
  font-size: 38px;
  line-height: 1.05;
}
.hero .display span { color: var(--teal); }
.hero p { color: var(--texto-tenue); max-width: 460px; margin-top: 8px; }
.hero-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--azul);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}
.btn-discord:hover { text-decoration: none; background: #5c9cff; }

/* --- Cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--linea);
  padding: 22px;
  margin-bottom: 22px;
  border-radius: 6px;
}
.card h2 { font-size: 23px; margin-bottom: 4px; }
.card .subt { color: var(--texto-tenue); font-size: 14px; margin-bottom: 16px; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }

/* --- Tabla de ranking --- */
table.ranking { width: 100%; border-collapse: collapse; }
table.ranking th {
  text-align: left;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-tenue);
  border-bottom: 1px solid var(--linea);
  padding: 8px 10px;
}
table.ranking td {
  padding: 10px;
  border-bottom: 1px solid var(--linea);
  font-size: 15px;
}
table.ranking tr:last-child td { border-bottom: none; }
table.ranking tr.puesto-1 td:first-child { color: var(--teal); font-weight: 600; }
.tiempo-cel { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: 0.02em; }
.evid-link { font-size: 13px; color: var(--azul); }

.vacio { color: var(--texto-tenue); font-style: normal; padding: 10px 0; }

/* --- Tabs --- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs a {
  padding: 7px 14px;
  border: 1px solid var(--linea);
  color: var(--texto-tenue);
  font-size: 14px;
  border-radius: 999px;
}
.tabs a.active { border-color: var(--teal); color: var(--teal); }
.tabs.tabs-clase a.active { border-color: var(--azul); color: var(--azul); }

/* --- Formularios --- */
label { display: block; font-size: 13px; color: var(--texto-tenue); margin: 14px 0 6px; }
label:first-of-type { margin-top: 0; }
input[type=text], input[type=password], input[type=number], input[type=file], select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--linea);
  color: var(--texto);
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  border-radius: 4px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.tiempo-inputs { display: flex; gap: 8px; align-items: center; }
.tiempo-inputs input { width: 70px; text-align: center; }
.tiempo-inputs span { color: var(--texto-tenue); }

.btn {
  display: inline-block;
  background: var(--teal);
  color: var(--bg);
  border: none;
  padding: 11px 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 18px;
  border-radius: 4px;
}
.btn:hover { background: #4be8d4; text-decoration: none; }
.btn.secundario { background: transparent; border: 1px solid var(--linea); color: var(--texto); }
.btn.peligro { background: var(--rojo); color: #fff; }
.btn.chico { padding: 6px 12px; font-size: 13px; margin-top: 0; }

.alerta {
  padding: 12px 14px;
  border-left: 3px solid var(--teal);
  background: rgba(43,217,196,0.08);
  color: var(--texto);
  font-size: 14px;
  margin-bottom: 18px;
  border-radius: 3px;
}
.alerta.error { border-color: var(--rojo); background: rgba(224,85,74,0.1); }

.badge { display: inline-block; font-size: 12px; padding: 3px 9px; border: 1px solid var(--linea); border-radius: 999px; }
.badge.pendiente { color: var(--azul); border-color: var(--azul-suave); }
.badge.aprobado { color: var(--verde); border-color: #2d5f47; }
.badge.rechazado { color: var(--rojo); border-color: var(--rojo); }

.login-box { max-width: 360px; margin: 60px auto; }

/* --- Avatares y fotos de autos --- */
.avatar-mini {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  border: 1px solid var(--linea);
}
.piloto-cel { display: flex; align-items: center; gap: 8px; }
.piloto-cel .avatar-mini { width: 26px; height: 26px; }

.avatar-grande {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--linea);
}
.avatar-vacio {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  color: var(--teal);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 700;
}

.auto-mini {
  width: 40px; height: 28px;
  object-fit: cover;
  border: 1px solid var(--linea);
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 3px;
}
.auto-cel { display: flex; align-items: center; }

.circuito-mini {
  width: 100%; height: 110px;
  object-fit: cover;
  border: 1px solid var(--linea);
  border-radius: 4px;
  margin-bottom: 10px;
}

/* --- Selector de autos con imagen (marca/modelo) --- */
.auto-picker-preview {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--linea);
  border-radius: 4px;
  min-height: 54px;
}
.auto-picker-preview img { width: 64px; height: 44px; object-fit: cover; border-radius: 3px; }
.auto-picker-preview .sin-imagen {
  width: 64px; height: 44px; border-radius: 3px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-tenue); font-size: 11px;
}

/* --- Footer --- */
footer.site-footer {
  border-top: 1px solid var(--linea);
  padding: 30px 0;
  margin-top: 20px;
}
footer.site-footer .wrap {
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
footer.site-footer .foot-brand { display: flex; align-items: center; gap: 10px; color: var(--texto-tenue); font-size: 13px; }
footer.site-footer img.logo-mini { width: 22px; height: 22px; border-radius: 50%; }
footer.site-footer .foot-links { display: flex; gap: 16px; font-size: 13px; }

/* --- Layout admin con sidebar --- */
.admin-shell { display: flex; min-height: calc(100vh - 66px); }
.admin-sidebar {
  width: 210px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--linea);
  padding: 18px 0;
}
.admin-sidebar .titulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 18px 10px;
}
.admin-sidebar a {
  display: block;
  color: var(--texto);
  font-size: 15px;
  padding: 10px 18px;
  border-left: 3px solid transparent;
}
.admin-sidebar a:hover { background: var(--surface-2); text-decoration: none; }
.admin-sidebar a.active { border-left-color: var(--teal); color: var(--teal); background: var(--surface-2); }
.admin-content { flex: 1; padding: 0 24px; max-width: 780px; }
.admin-content .wrap { padding: 0; max-width: none; }

.sidebar-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--linea);
  color: var(--texto);
  padding: 8px 12px;
  cursor: pointer;
  margin: 16px 0 0 16px;
  border-radius: 4px;
}

@media (max-width: 820px) {
  .admin-shell { flex-direction: column; }
  .sidebar-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .admin-sidebar { width: 100%; display: none; border-right: none; border-bottom: 1px solid var(--linea); }
  .admin-shell.sidebar-abierto .admin-sidebar { display: block; }
  .admin-content { padding: 0 16px; max-width: none; }
}

@media (max-width: 600px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero .display { font-size: 30px; }
}