/* ============================================================
   smgr · css/pages/viz_equipos_curiosos.css — EQUIPOS LEGALES PERO RAROS
   (visualizacion_equipos_curiosos.php).

   Muchas tarjetas iguales, una por criterio, cada una con su botón de captura
   porque van a un hilo de X de una en una. Ancho fijo de 620 px: la cabecera
   (marca + título + gancho) necesita más ancho que la tabla, y el sobrante, que
   antes era un agujero en medio de cada fila, se lo queda ahora la barra del
   criterio. El nombre no envuelve y su columna se ajusta al contenido.
   El .ec-scaler las reduce con transform en móvil, con la escala
   en la tarjeta y transformOrigin arriba-izquierda para que html2canvas las
   clone a tamaño natural.
   ============================================================ */

/* ---------- Barra de cada bloque (fuera de la captura) ---------- */
.ec-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin: var(--sp-6) 0 10px;
}
.ec-bar h2 { margin: 0; font-size: 20px; }
.ec-nohay { margin: 0 0 var(--sp-4); color: var(--muted); font-size: 14px; }

.ec-scaler { overflow: hidden; margin-bottom: var(--sp-4); }

.ec-card {
  font-family: 'Inter', sans-serif;
  width: 620px; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
}
.ec-card * { box-sizing: border-box; }

/* ---------- Cabecera: marca + título + el dato grande ---------- */
.ec-head {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%);
  color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  border-bottom: 3px solid #d4a76a;
}
.ec-head__txt { flex: 1 1 auto; min-width: 0; }
.ec-head .kick { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #cbd5e0; }
.ec-head .title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; margin-top: 2px; }
.ec-head .sub { font-size: 11px; opacity: .87; margin-top: 3px; font-weight: 500; }

/* El gancho es el que se lee primero en el timeline: va grande y a la derecha,
   separado con una línea para que no se confunda con el título. */
.ec-gancho {
  flex: 0 0 auto; text-align: right; padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.ec-gancho .n {
  display: block; font-size: 23px; font-weight: 900; letter-spacing: -.8px;
  line-height: 1; color: #ffd487; font-variant-numeric: tabular-nums;
}
.ec-gancho .t { display: block; font-size: 10px; font-weight: 600; color: #cbd5e0; margin-top: 4px; }

/* ---------- Tabla de los diez ---------- */
.ec-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.ec-t thead th {
  background: #2d3748; color: #fff; padding: 6px 9px;
  font-weight: 800; font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  text-align: left; white-space: nowrap;
}
.ec-t thead th.c-pre, .ec-t thead th.c-dat { text-align: right; }
.ec-t tbody td { padding: 7px 9px; border-bottom: 1px solid #edf2f7; vertical-align: middle; }
.ec-t tbody tr:last-child td { border-bottom: 0; }
.ec-t tbody tr:nth-child(even) td { background: #f7fafc; }

.ec-t .c-pos { width: 34px; }
.ec-t .c-jug { width: 1%; white-space: nowrap; }
/* La barra se queda con todo el sobrante: es la única columna elástica. */
.ec-t .c-bar { width: auto; padding-left: 6px; padding-right: 6px; }
.ec-t .c-eq { width: 66px; }
.ec-t .c-pre { width: 82px; text-align: right; }
.ec-t .c-dat { width: 90px; text-align: right; white-space: nowrap; }

/* La cuota (2 bases, 4 aleros, 4 pívots) es una regla del juego, así que se ve:
   línea más marcada donde empieza cada grupo de posición. */
.ec-t tbody tr.grp td { border-top: 2px solid #cbd5e0; }

/* OJO: los colores van sólo en tbody. Sin acotarlos, las cabeceras heredaban el
   gris oscuro y quedaban ilegibles sobre el fondo oscuro del thead. */
.ec-t tbody .c-jug { font-weight: 700; color: #1a202c; }
.ec-t tbody .c-pre { font-weight: 700; color: #2d3748; font-variant-numeric: tabular-nums; }
.ec-t tbody .c-dat { font-weight: 800; color: #1a202c; font-variant-numeric: tabular-nums; }

/* La barra del criterio. Crece de IZQUIERDA a derecha, como se espera de una
   barra: anclada a la derecha (pegada a su número) el tramo claro quedaba
   delante y parecía una barra vaciándose. Color plano y no degradado:
   html2canvas es más fiable con planos. */
.ec-b {
  display: block; position: relative; height: 7px; border-radius: 4px;
  background: #e6ebf2; min-width: 40px;
}
.ec-b__f {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 4px; background: #4a7cb5;
}

.pos {
  display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center;
  border-radius: 5px; font-size: 10.5px; font-weight: 800;
}
.pos--b { background: #e3ecfb; color: #2b4f86; }
.pos--a { background: #ede4fb; color: #5b3a8e; }
.pos--p { background: #e0f3ea; color: #1f6b48; }

/* Cupo: sólo se marca lo que condiciona la legalidad del equipo, y con las
   banderitas de siempre (bnac = de formación, bextra = extracomunitario). El
   display: inline-block es obligatorio: rincon.css trae img { display: block }.
   El tamaño va aquí y no en rincon.css porque la captura excluye ese fichero. */
.ec-t .c-jug .cup {
  display: inline-block; width: 15px; height: 15px; margin-left: 7px;
  vertical-align: -3px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(19, 28, 46, .18);
}

/* OJO con el escudo: rincon.css trae `img { display: block }` y sin esto el
   escudo se pone ENCIMA del código del equipo y engorda todas las filas. En el
   PNG no se veía porque la captura clona la tarjeta sin rincon.css. */
.ec-t .c-eq { white-space: nowrap; }
.ec-t .c-eq img {
  display: inline-block; width: 18px; height: 18px; object-fit: contain; vertical-align: -4px;
}
.ec-t .c-eq span { margin-left: 5px; font-size: 11px; font-weight: 700; color: #4a5568; }

/* ---------- Pie con las tres cuentas de la legalidad ---------- */
.ec-pie {
  background: #2d3748; color: rgba(255, 255, 255, .8);
  padding: 7px 16px; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-size: 9.5px; font-weight: 600;
}
.ec-pie .web { color: #fff; white-space: nowrap; }
.ec-pie .reglas b { color: #fff; }

/* ---------- Fuera de las tarjetas ---------- */
.ec-metodo { margin-top: var(--sp-6); }
.ec-metodo > summary {
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 0; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.ec-metodo > summary::-webkit-details-marker { display: none; }
.ec-metodo > summary::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 8px;
  border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.ec-metodo[open] > summary::before { transform: rotate(45deg); }
.ec-metodo__body p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 80ch; }
.ec-metodo__body strong { color: var(--ink); font-weight: 600; }
.ec-link { margin: var(--sp-4) 0 0; }