/* MY SOCCER SQUAD - estilos propios del dashboard (sobre la base moderna de MRC) */

.mss_dashboard {
  max-width: 1000px;
  margin: 0 auto;
  /* padding-top/bottom para no quedar bajo la barra superior fija (~69px) ni la inferior (46px) */
  padding: 79px 10px 60px;
}

/* --- Bloque: cabecera del club --- */
.club_header {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(13, 20, 32, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.club_header .club_crest {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: contain;
}
.club_header .club_id {
  flex: 1 1 auto;
  min-width: 0;
}
.club_header .club_sub {
  font-size: 11px;
  color: #8aa0bd;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.club_header .club_name {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
}
.club_header .club_manager {
  font-size: 12px;
  color: #b9c6d6;
  margin-top: 3px;
}
.club_header .club_meta {
  flex: 0 0 auto;
  text-align: right;
  color: #cdd8e6;
  font-size: 13px;
  line-height: 1.5;
}
.club_header .club_meta .season {
  font-weight: 700;
  color: #ffffff;
}
.club_header .club_meta .club_money {
  margin-top: 4px;
  font-size: 13px;
  color: #e6edf5;
}
.club_header .club_meta .club_coin {
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border-radius: 50%;
  background: #2ea043;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: -2px;
}
.club_header .club_meta .club_sep { color: #56677d; margin: 0 3px; }

/* --- Rejilla del dashboard: contenido principal + sidebar --- */
.dash_grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  align-items: start;
}
@media screen and (max-width: 860px) {
  .dash_grid { grid-template-columns: 1fr; }
}

/* --- Tarjeta genérica --- */
.dash_card {
  background: rgba(13, 20, 32, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.dash_card .dash_card_head {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8aa0bd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dash_card .dash_card_body {
  padding: 14px;
  color: #cdd8e6;
  font-size: 13px;
}
.dash_card .dash_placeholder {
  color: #6d7f95;
  font-style: italic;
  text-align: center;
  padding: 24px 10px;
}

/* --- Próximo partido: barra sobria (estilo offline) --- */
.next_match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(13, 20, 32, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 16px;
  margin-bottom: 12px;
}
.next_match .nm_label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8aa0bd;
}
.next_match .nm_opponent {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}
.next_match .nm_countdown {
  font-size: 18px;
  font-weight: 700;
  color: #007EFF;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.next_match .nm_countdown small {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: #8aa0bd;
  letter-spacing: .18em;
  text-align: right;
}

/* --- Overrides de la barra superior: texto blanco, fondos oscuros, iconos azules --- */
.top_panel .coins,
.top_panel .account_type,
.top_panel .top_messages,
.top_panel .top_notifications {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}
.top_panel .open_user_menu {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.top_panel .coins .unread,
.top_panel .top_messages .unread,
.top_panel .top_notifications .unread {
  color: #ffffff;
}

/* --- Panel inferior full-width: proximo partido (izq) + info (der) --- */
#bottom_panel.driver_panel {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 46px !important;
  line-height: normal !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px !important;
  background: rgba(9, 14, 22, 0.95) !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}
#bottom_panel .bp_match {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#bottom_panel .bp_match .bp_match_label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8aa0bd;
}
#bottom_panel .bp_match .bp_match_opp {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#bottom_panel .bp_match .bp_countdown {
  font-size: 15px;
  font-weight: 700;
  color: #007EFF;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
#bottom_panel .bp_info {
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
  color: #ffffff;
}
#bottom_panel .bp_info a { color: #ffffff; text-decoration: none; }
#bottom_panel .bp_info a:hover { color: #007EFF; }
/* iconos de escudo (driver) y dinero (finances) al estilo MRC: sin repetir, a la izquierda */
#bottom_panel .bp_info .driver,
#bottom_panel .bp_info .finances {
  background-repeat: no-repeat;
  background-position: left center;
}

/* --- Bloque calendario (temporada + semana actual) --- */
.cal_block {
  display: flex;
  gap: 14px;
  background: rgba(13, 20, 32, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.cal_block .cal_head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8aa0bd;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Calendario de temporada (77 dias) */
.cal_season { flex: 0 0 210px; }
.cal_season .cal_dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}
.cal_season .cal_dow span {
  text-align: center;
  font-size: 9px;
  color: #6d7f95;
}
.cal_season .cal_grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal_season .cal_day {
  text-align: center;
  font-size: 10px;
  padding: 3px 0;
  border-radius: 3px;
  color: #b9c6d6;
  background: rgba(255, 255, 255, 0.04);
}
.cal_season .cal_day.cal_past { color: #566677; background: rgba(255, 255, 255, 0.02); }
.cal_season .cal_day.cal_today { background: #007EFF; color: #ffffff; font-weight: 700; }

/* Semana actual */
.cal_week {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cal_week .cal_week_days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  gap: 6px;
  flex: 1 1 auto; /* llena el alto restante para igualar el calendario de la izquierda */
}
.cal_week .cal_wday {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 6px 7px;
  min-height: 96px;
  box-sizing: border-box;
}
.cal_week .cal_wday.cal_today {
  border-color: rgba(0, 126, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(0, 126, 255, 0.35);
}
.cal_week .cal_wday.cal_past { opacity: .5; }
.cal_week .cal_wday_top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cal_week .cal_wday_dow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7d8ea3;
}
.cal_week .cal_wday_num {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.cal_week .cal_wday_body { margin-top: 6px; }

/* Evento partido: escudo (izq) + info (der) */
.cal_ev_match { display: flex; align-items: center; gap: 6px; }
.cal_ev_match .cal_ev_crest { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; }
.cal_ev_match .cal_ev_info { flex: 1 1 auto; text-align: right; line-height: 1.25; min-width: 0; }
.cal_ev_match .cal_ev_comp { font-size: 9px; color: #8aa0bd; text-transform: uppercase; }
.cal_ev_match .cal_ev_team { font-size: 11px; font-weight: 700; color: #ffffff; }
.cal_ev_match .cal_ev_pos  { font-size: 10px; color: #b9c6d6; }
.cal_ev_match .cal_ev_lv   { font-size: 11px; font-weight: 700; color: #007EFF; }

/* Otros eventos (entrenamiento, sorteo, fichaje...) */
.cal_ev_other { font-size: 10px; color: #9fb0c4; margin-top: 4px; }
.cal_ev_other .cal_ev_dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2ea043; vertical-align: middle; margin-right: 3px; }

/* marca de dia con evento en el mini calendario */
.cal_season .cal_day.cal_hasev { box-shadow: inset 0 -3px 0 #007EFF; }

@media screen and (max-width: 860px) {
  .cal_block { flex-direction: column; }
  .cal_season { flex: 1 1 auto; }
}