/* ===== Buscador de Piloto — Estilo tipo broadcast ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: #1a1a2e;
  color: #fff;
  font-family: 'Inter', Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
}

/* ===== Botón Inicio ===== */
.home-btn {
  position: fixed;
  top: 12px;
  left: 14px;
  background: rgba(255,255,255,.08);
  color: #ccc;
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  z-index: 100;
  transition: background .2s;
}
.home-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ===== Título ===== */
.page-title {
  font-size: clamp(18px, 3.5vw, 28px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #e0e0e0;
  margin-bottom: 24px;
  text-align: center;
}

/* ===== Buscador ===== */
.search-container {
  width: 100%;
  max-width: 600px;
  position: relative;
  margin-bottom: 32px;
}

.search-input {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
  background: #16213e;
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 12px;
  color: #fff;
  outline: none;
  transition: border-color .2s;
}
.search-input::placeholder {
  color: rgba(255,255,255,.35);
  font-weight: 400;
}
.search-input:focus {
  border-color: #4fc3f7;
}

/* Autocomplete dropdown */
.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #16213e;
  border: 1px solid rgba(255,255,255,.15);
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}
.autocomplete-list.show { display: block; }

.autocomplete-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: background .15s;
}
.autocomplete-item:hover,
.autocomplete-item.active {
  background: rgba(79,195,247,.15);
}

/* ===== Resultados ===== */
.results-container {
  width: 100%;
  max-width: 900px;
  display: none;
}
.results-container.show { display: block; }

/* Cabecera del piloto */
.pilot-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #16213e, #1a1a2e);
  border-radius: 14px;
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.pilot-team-badge {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  flex-shrink: 0;
}
.pilot-info {
  flex: 1;
}
.pilot-name {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pilot-meta {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
}
.pilot-meta span {
  margin-right: 16px;
}

/* ===== Barra de participación histórica ===== */
.hist-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.hist-bar:empty {
  display: none;
}
.hist-current {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 14px;
  background: rgba(230,81,0,.12);
  border: 1px solid rgba(230,81,0,.4);
  border-radius: 10px;
}
.hist-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e65100;
  color: #fff;
}
.hist-event-name {
  font-weight: 800;
  font-size: 15px;
}
.hist-back-btn {
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: #cfe3ff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}
.hist-back-btn:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.hist-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hist-label {
  font-size: 13px;
  font-weight: 700;
  color: #8a8aa0;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.hist-select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: #16213e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 200px;
}
.hist-select:hover {
  border-color: rgba(79,195,247,.5);
}
.hist-none {
  font-size: 13px;
  color: #6a6a80;
  font-style: italic;
}

/* ===== Aviso de estado vacío ===== */
.empty-notice {
  padding: 16px 20px;
  margin-bottom: 20px;
  background: rgba(22,33,62,.7);
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 12px;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  text-align: center;
}

/* ===== Secciones de datos ===== */
.data-section {
  background: rgba(22,33,62,.7);
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.section-title {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8a8aa0;
  background: #16213e;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===== Tabla genérica ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a8aa0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  white-space: nowrap;
}
.data-table tbody td {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.04);
  white-space: nowrap;
}
.data-table tbody tr:hover {
  background: rgba(79,195,247,.06);
}

/* Alineamientos especiales */
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.badge-ta { background: #e65100; color: #fff; }
.badge-qualy { background: #0070C5; color: #fff; }
.badge-carrera { background: #00BBE6; color: #000; }
.badge-390 { background: #e74c3c; color: #fff; }
.badge-270 { background: #3498db; color: #fff; }
.badge-penalty { background: #ff5252; color: #fff; }
.badge-bonus  { background: #2ecc71; color: #fff; }

/* Posición highlight */
.pos-1 { color: #ffd700; }
.pos-2 { color: #c0c0c0; }
.pos-3 { color: #cd7f32; }

/* ===== Resumen rápido (cards) ===== */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.summary-card {
  background: rgba(22,33,62,.7);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.summary-card .card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a8aa0;
  margin-bottom: 8px;
}
.summary-card .card-value {
  font-size: 24px;
  font-weight: 900;
}

/* ===== Kart pills ===== */
.kart-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
}
.kart-pill {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.kart-pill .session-label {
  color: #8a8aa0;
  font-size: 11px;
  margin-right: 6px;
}

/* ===== No data message ===== */
.no-data {
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,.35);
  font-size: 14px;
  font-style: italic;
}

/* ===== Loading ===== */
.loading {
  text-align: center;
  padding: 40px;
  color: rgba(255,255,255,.35);
  font-size: 16px;
}
.loading::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: #4fc3f7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .pilot-header { flex-direction: column; text-align: center; }
  .summary-cards { grid-template-columns: 1fr 1fr; }
  .data-table { font-size: 12px; }
  .data-table thead th,
  .data-table tbody td { padding: 8px 10px; }
}

/* ===== Comprobar inscripción (misma consulta que "Mi Inscripción") ===== */
.insc-box {
  margin: -12px 0 24px;          /* pegado justo debajo del recuadro del nombre */
}

.insc-toggle {
  width: 100%;
  padding: 11px 18px;
  border: 1px solid rgba(211,84,0,.5);
  border-radius: 12px;
  background: rgba(211,84,0,.12);
  color: #f5a623;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.insc-toggle:hover {
  background: rgba(211,84,0,.22);
  border-color: rgba(211,84,0,.8);
}

.insc-panel {
  margin-top: 10px;
  padding: 16px 18px;
  background: rgba(22,33,62,.7);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid #d35400;
  border-radius: 12px;
}

.insc-intro {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-bottom: 12px;
  line-height: 1.5;
}

.insc-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.insc-row input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
  background: #16213e;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  color: #fff;
  outline: none;
  transition: border-color .2s;
}
.insc-row input:focus { border-color: #f5a623; }
.insc-row input::placeholder { color: rgba(255,255,255,.35); font-weight: 400; }

.insc-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #d35400;
  color: #fff;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s;
}
.insc-btn:hover { background: #e67e22; }

.insc-msg {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}
.insc-msg.insc-notfound { color: #ff8a80; }

.insc-card {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.insc-who { font-size: 15px; margin-bottom: 6px; }
.insc-ta  { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 10px; }

.insc-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.insc-status .ic { font-weight: 900; width: 18px; text-align: center; }
.insc-status.ok .ic { color: #2ecc71; }
.insc-status.no .ic { color: #ff5252; }
.insc-status .lb { font-weight: 700; }
.insc-status .ex { color: rgba(255,255,255,.55); font-size: 13px; margin-left: auto; text-align: right; }

.insc-all-ok {
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(46,204,113,.14);
  color: #2ecc71;
  font-weight: 800;
  text-align: center;
}

.insc-pend {
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,82,82,.12);
  color: #ffb4a9;
  font-size: 13px;
  text-align: center;
}

/* ===== Tus sesiones (TA + Qualy del evento activo) ===== */
.mis-sesiones {
  margin: -12px 0 24px;          /* pegado justo debajo del recuadro del nombre */
  padding: 14px 18px;
  background: rgba(22,33,62,.7);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid #e94560;
  border-radius: 12px;
}
.mis-sesiones .ms-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8a8aa0;
  margin-bottom: 10px;
}
.mis-sesiones .ms-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mis-sesiones .ms-row:first-of-type { border-top: none; }
.mis-sesiones .ms-name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mis-sesiones .ms-hora {
  font-weight: 700;
  color: #4dd0e1;
}
.mis-sesiones .ms-kart {
  font-size: 12px;
  font-weight: 700;
  color: #ccc;
  background: rgba(255,255,255,.08);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: auto;
}

/* ===================== MODO CLARO (base) ===================== */
:root[data-theme="light"] body { background: #eef1f6; color: #1f2733; }
:root[data-theme="light"] .home-btn { background: rgba(0,0,0,.06); color: #24303f; border-color: rgba(0,0,0,.12); }
:root[data-theme="light"] .home-btn:hover { background: rgba(0,0,0,.12); color: #14202c; }
:root[data-theme="light"] .page-title { color: #24303f; }
:root[data-theme="light"] .page-sub,
:root[data-theme="light"] .subtitle,
:root[data-theme="light"] .section-head p,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .hint,
:root[data-theme="light"] label,
:root[data-theme="light"] .field-lbl { color: #5a6472; }
:root[data-theme="light"] .card,
:root[data-theme="light"] .tool-card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .admin-panel,
:root[data-theme="light"] .box,
:root[data-theme="light"] .chip { background: #ffffff; border-color: rgba(0,0,0,.10); color: #1f2733; }
:root[data-theme="light"] input[type=text],
:root[data-theme="light"] input[type=number],
:root[data-theme="light"] input[type=search],
:root[data-theme="light"] select,
:root[data-theme="light"] input[type=file],
:root[data-theme="light"] textarea { background: #ffffff; color: #1f2733; border-color: rgba(0,0,0,.18); }
:root[data-theme="light"] .table-wrapper { box-shadow: 0 8px 26px rgba(20,30,50,.10); }
:root[data-theme="light"] .table-wrapper::-webkit-scrollbar-track { background: #e2e6ee; }
:root[data-theme="light"] .table-wrapper::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); }
:root[data-theme="light"] thead th { background: #e7ebf3; color: #5a6472; border-bottom-color: rgba(0,0,0,.14); }
:root[data-theme="light"] tr.normal:nth-child(odd)  { background: #ffffff; }
:root[data-theme="light"] tr.normal:nth-child(even) { background: #f4f6fa; }
:root[data-theme="light"] tr.normal td { color: #24303f; border-bottom-color: rgba(0,0,0,.06); }
/* Superficies específicas */
:root[data-theme="light"] .data-section,
:root[data-theme="light"] .empty-notice,
:root[data-theme="light"] .insc-panel,
:root[data-theme="light"] .mis-sesiones,
:root[data-theme="light"] .summary-card { background:#ffffff; border-color:rgba(0,0,0,.10); color:#1f2733; }
:root[data-theme="light"] .search-input,
:root[data-theme="light"] .autocomplete-list,
:root[data-theme="light"] .hist-select,
:root[data-theme="light"] .insc-row input { background:#ffffff; color:#1f2733; border-color:rgba(0,0,0,.18); }
:root[data-theme="light"] .section-title { background:#e7ebf3; color:#24303f; }
:root[data-theme="light"] .pilot-header { background:linear-gradient(135deg,#ffffff,#eef2f8); color:#1f2733; border-color:rgba(0,0,0,.10); }
:root[data-theme="light"] .data-table thead th { background:#e7ebf3; color:#5a6472; }
:root[data-theme="light"] .data-table td { color:#24303f; border-bottom-color:rgba(0,0,0,.06); }

/* Compañeros de equipo: nombres en MAYÚSCULAS como en el resto de la app */
#equipo-content li { text-transform: uppercase; }

/* Extra opcional (paella): neutro, no es un requisito pendiente */
.insc-status.opt .ic { color: #8a8aa0; }
.insc-status.opt .lb { font-weight: 600; opacity: .85; }