@charset "utf-8";
/* CSS Document */
/* Asegura ancho real de la tabla */
.olympic-table {
	width:100%;
	table-layout:fixed;   /* OK, pero hay que definir anchos */
}
/* Alineación vertical */
.olympic-table td {
	vertical-align:top;
}

/* Reparte ancho entre columnas (ajusta si quieres) */
.olympic-table th:nth-child(1), .olympic-table td:nth-child(1) {
 width:22%;
}
.olympic-table th:nth-child(2), .olympic-table td:nth-child(2), .olympic-table th:nth-child(3), .olympic-table td:nth-child(3), .olympic-table th:nth-child(4), .olympic-table td:nth-child(4) {
 width:26%;
}
/* Mini-layout sin “encoger” el texto */
.flagcell {
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:8px;
	width:100%;
	align-items:start;
}
.flagcell .code {
	white-space:nowrap;
	font-weight:600;
}
/* CLAVE: permite que el bloque derecho use todo el ancho disponible */
.flagcell .list {
	min-width:0;
}
/* Por si algún CSS tuyo vuelve <small> block */
.flagcell .list small {
	display:inline;
}
/* ===== FIX mini-layout para tablas de medallero ===== */

/* tabla */
.olympic-table{
  width: 100%;
  table-layout: fixed;        /* importante */
}

/* celdas */
.olympic-table th,
.olympic-table td{
  vertical-align: top;
  white-space: normal;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* anchos de columnas (ajusta si quieres) */
.olympic-table th:nth-child(1),
.olympic-table td:nth-child(1){ width: 22%; }

.olympic-table th:nth-child(2),
.olympic-table td:nth-child(2),
.olympic-table th:nth-child(3),
.olympic-table td:nth-child(3),
.olympic-table th:nth-child(4),
.olympic-table td:nth-child(4){ width: 26%; }

/* mini-layout: código país + lista */
.flagcell{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  align-items: start;
  width: 100%;
}

/* "USA -" no debe partirse */
.flagcell .code{
  white-space: nowrap;
  font-weight: 700;
}

/* CLAVE: deja que el bloque derecho use el ancho y NO se “encoga” */
.flagcell .list{
  min-width: 0;
}

/* por si tu CSS convierte small en block */
.flagcell .list small{
  display: inline;
}/* 1) IMPORTANTÍSIMO: que las columnas de medallas NO estén centradas */
.olympic-table td:nth-child(2),
.olympic-table td:nth-child(3),
.olympic-table td:nth-child(4){
  text-align: left;
  vertical-align: top;
}

/* 2) Mini-layout: columna fija para bandera + columna para código/lista */
.flagcell{
  display: grid;
  grid-template-columns: 28px 1fr;  /* 28px = “columna bandera” */
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: start;
}

/* La bandera la mete tu script como <img> al principio: la fijamos */
.flagcell > img{
  grid-column: 1;
  grid-row: 1;
  width: 22px;
  height: auto;
  display: block;
  margin-top: 2px;
}

/* Código (USA -, CAN -, etc.) siempre en el mismo sitio */
.flagcell .code{
  grid-column: 2;
  grid-row: 1;
  font-weight: 700;
  white-space: nowrap;
}

/* Lista debajo del código, alineada */
.flagcell .list{
  grid-column: 2;
  grid-row: 2;
}

/* =========================
   2) Responsive móvil: apilar medallas
   ========================= */

/* En pantallas estrechas, cada fila se convierte en “bloques” */
@media (max-width: 820px){
  .olympic-table{
    table-layout: auto;
  }

  .olympic-table thead{
    display:none; /* ocultamos cabecera de iconos */
  }

  .olympic-table tr{
    display:block;
    margin-bottom: 14px;
  }

  .olympic-table td{
    display:block;
    width:100% !important;
    box-sizing:border-box;
  }

  /* la “prueba” arriba como título del bloque */
  .olympic-table td:nth-child(1){
    font-weight: 700;
    margin-bottom: 8px;
  }

  /* labels Oro/Plata/Bronce antes de cada tarjeta */
  .olympic-table td:nth-child(2)::before,
  .olympic-table td:nth-child(3)::before,
  .olympic-table td:nth-child(4)::before{
    display:block;
    font-weight:700;
    margin: 10px 0 6px;
    opacity: .85;
  }

  .olympic-table td:nth-child(2)::before{ content:"🥇 Oro"; }
  .olympic-table td:nth-child(3)::before{ content:"🥈 Plata"; }
  .olympic-table td:nth-child(4)::before{ content:"🥉 Bronce"; }
}