/* CONTENEDOR GENERAL */
.ContenedorAmbos {
    position: relative;
/*    display: flex; */
display: grid;
    grid-auto-flow: column;
    width: 200vw;
    height: 100vh;
    overflow: hidden;
    transition: transform 1s ease;
    z-index: 5;
	transform: translateX(-100vw);
    gap: 0px;
}

/* El cuadro inverso (de consolación), que será desplazado fuera de la pantalla */
.CuadroInverso {
  margin: 10px;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
    display: grid;
    grid-template-columns: repeat(var(--rondas), 1fr);
    grid-template-rows: auto;
    flex-shrink: 0;
    gap: 0px;
}

/* El cuadro directo (principal), que será visible en la mitad derecha */
.CuadroDirecto {
  display: grid;
  grid-template-columns: repeat(var(--rondas), 1fr);
  gap: 0px;
  margin: 10px;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  flex-shrink: 0;
}

/* CADA RONDA */
.round {
  display: grid;
  grid-template-columns: 25% 75%;
}
.rondainv {
  display: grid;
  grid-template-columns: 75% 25%;
}

/* =========================
   COLUMNA DE CONEXIONES
   ========================= */
.round-bg {
  display: grid;
  grid-auto-rows:
}
.rondainv-bg {
  display: grid;
  grid-auto-rows: 2fr;
}

/* DIBUJO DE LAS LÍNEAS */
.conexion {
  width: 100%;
  height: 100%;
}

.conexion svg {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.linea-fondo {
  stroke: white;
  stroke-width: 2; /* gruesa para efecto de contorno */
}

.linea-frontal {
  stroke: blue;
  stroke-width: 1; /* fina encima */
}
.conex-1 .linea-fondo {
  stroke-width: 6; /* Más fina para la columna 6 */
}
.conex-1 .linea-frontal {
  stroke-width: 3; /* Más fina para la columna 6 */
}
.conex-2 .linea-fondo {
  stroke-width: 4; /* Más fina para la columna 6 */
}
.conex-2 .linea-frontal {
  stroke-width: 2; /* Más fina para la columna 6 */
}
.conexionpng {
  width: 100%;
  height: 100%;
  
  /* Fondo PNG que ocupa todo el contenedor */
  background-image: url('flecha.png');
  background-size: 100% 100%;  /* estira la imagen exactamente al ancho y alto */
  background-repeat: no-repeat; /* no repetir la imagen */
  background-position: center;  /* opcional, centra la imagen */
}
/* =========================
   COLUMNA DE MESAS
   ========================= */
.round-content {
  display: grid;
  grid-auto-rows: 1fr;
  justify-items: center;
  align-items: center;
  gap: 0px;
  margin: 0;
  padding: 0;
}
.rondainv-content {
  display: grid;
  grid-auto-rows: 1fr;
  justify-items: center;
  align-items: center;
}

/* MESA */
.mesa {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.mesaint {
  border: 2px solid blue;
  border-spacing: 0px;
  background-color: white;
  padding: 0;
  margin: 0;
  width: 100%;
  table-layout: fixed;
}
table.mesaint td.enlborr {
    padding: 0px; /* Espacio dentro de las celdas */
	text-align: center;
	vertical-align: middle;
	width: 20px;
}
table.mesaint td.enltxt {
    padding: 0px; /* Espacio dentro de las celdas */
	text-align: center;
	vertical-align: middle;
    width: 100%; /* La celda de texto ocupa el espacio restante, 20px menos */
    overflow: hidden;          /* Oculta el texto que se desborda */
    white-space: nowrap;       /* Evita que el texto se divida en varias líneas */
    display: block;            /* Para asegurar que el texto no se desborde */
}

table.mesaint th {
    padding: 0px; /* Espacio dentro de las celdas */
}

/* LÍNEAS (parejas / ganadores) */
.linea {
  width: 100%;
  padding: 6px;
  background: #fff;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .linea {
    width: 140px;
    font-size: 12px;
  }
}

.ParejaTxt {
	text-align:center;
	padding: 0px;
	margin: 0px;
	font-size: 16px;
}
.ParejaTxt0 {
	text-align:center;
	padding: 0px;
	margin: 0px;
	font-size: 9px;
}
a.ParGana:link,
a.ParGana:visited  { text-decoration: none; color: #000; font-family: "arial"; font-weight: normal; font-size: 2vh; padding: 0px; margin: 0px; }
a.ParGana:hover    { color: #00F; font-weight: bold; }


.Colum1, .Colum2, .Colum3, .Colum4, .Colum5, .Colum6 {
	text-align:center;
	font-family: "arial";
	font-weight: normal;
	color: #000;
	padding: 0px;
	margin: 0px;
}

.col-6 .Colum6 { font-size: 0.8vh; transform: scaleX(1.5); }
.col-6 .Colum5 { font-size: 1.5vh; }
.col-6 .Colum4 { font-size: 1.8vh; }
.col-6 .Colum3 { font-size: 2.0vh; transform: scaleX(0.9); }
.col-6 .Colum2 { font-size: 2.1vh; transform: scaleX(0.9); }
.col-6 .Colum1 { font-size: 2.2vh; transform: scaleX(0.8); }

.col-5 .Colum5 { font-size: 1.5vh; }
.col-5 .Colum4 { font-size: 2.0vh; }
.col-5 .Colum3 { font-size: 2.2vh; }
.col-5 .Colum2 { font-size: 2.3vh; transform: scaleX(0.9); }
.col-5 .Colum1 { font-size: 2.5vh; transform: scaleX(0.8); }

.col-4 .Colum4 { font-size: 2.2vh; }
.col-4 .Colum3 { font-size: 2.8vh; }
.col-4 .Colum2 { font-size: 3.2vh; transform: scaleX(0.9); }
.col-4 .Colum1 { font-size: 3.6vh; transform: scaleX(0.8);}

.col-3 .Colum3 { font-size: 2.5vh; }
.col-3 .Colum2 { font-size: 3.0vh; }
.col-3 .Colum1 { font-size: 3.5vh; }

a.Colum1, a.Colum2, a.Colum3, a.Colum4, a.Colum5, a.Colum6 {
    text-decoration: none;
	font-weight: bold;
    color: #444;
}
a.Colum1:hover, a.Colum2:hover, a.Colum3:hover, a.Colum4:hover, a.Colum5:hover, a.Colum6:hover {
    color: #00F;
}