/* ─────────────────────────────────────────────────────────────────────
responsive-fixes.css — ajustes puntuales de móvil/Safari.
Se carga DESPUÉS de styles.css, así que solo AÑADE overrides; no modifica
el diseño existente. Para revertir: quita el de las páginas.
───────────────────────────────────────────────────────────────────── */
/* iPhone/Safari: el botón hamburguesa usaba sin ancho (dependían del
"stretch" de flex, que Safari colapsa a 0 → líneas invisibles). */
.topbar-burger span { width: 100%; }
/* Card de fixture FINAL: bajo el marcador, mostrar la hora en que se jugó
(pequeña). Antes desaparecía al reemplazar la hora por el resultado. */
.fixture-kickoff {
display: block;
margin-top: 4px;
font-family: var(--body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.06em;
opacity: 0.55;
}
/* ─────────────────────────────────────────────────────────────────────
CATNAV — flechas ‹ › de desplazamiento (SOLO desktop).
En desktop el usuario no sabe que la barra de categorías se arrastra; las
flechas lo hacen explícito. En móvil se ocultan (ahí se desliza con el dedo).
Solo aparecen cuando las categorías no entran (clase .has-arrows del JS).
───────────────────────────────────────────────────────────────────── */
.catnav-bar { display: flex; align-items: center; gap: 8px; max-width: 1400px; margin: 0 auto; }
.catnav-bar .catnav-inner { flex: 1 1 auto; margin: 0; }
.catnav-arrow {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
display: none; align-items: center; justify-content: center; padding: 0;
background: var(--paper-2); border: 1px solid var(--line);
color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
transition: background 0.15s, opacity 0.15s; user-select: none;
}
.catnav-arrow:hover { background: var(--paper-3); }
.catnav-arrow:disabled { opacity: 0.3; cursor: default; }
@media (min-width: 901px) {
.catnav.has-arrows .catnav-arrow { display: inline-flex; }
}
/* ─────────────────────────────────────────────────────────────────────
FIXTURE — nombre del equipo COMPLETO y en negrita (antes: 1ª palabra en
negrita + resto en gris claro). Reparto equilibrado izquierda/derecha.
───────────────────────────────────────────────────────────────────── */
.fixture-row-bot { align-items: flex-start; gap: 10px; }
.fixture-team { flex: 1 1 0; min-width: 0; }
.fixture-team-name { font-size: 16px; line-height: 1.14; white-space: normal; overflow-wrap: anywhere; }
.fixture-team-away .fixture-team-name { text-align: right; }
@media (max-width: 640px) {
/* Refuerzo anti-desborde horizontal (Safari a veces ignora overflow-x:clip en ). */
html, body { overflow-x: hidden; }
/* HERO — las dos tarjetas se apilan y el contenido deja de cortarse. */
.hero-cards { grid-template-columns: 1fr; gap: 12px; }
.hero-card { padding: 18px; }
/* "Ver fixture / Ver tabla" era absoluto arriba-derecha y se cortaba → al flujo. */
.hero-card-cta { position: static; margin-top: 14px; opacity: 0.85; }
/* Nombres de equipos apilados (antes lado a lado se cortaba "GERMANIA"). */
.hero-card-teams { flex-direction: column; gap: 2px; font-size: 16px; }
.hero-card-leader-name { font-size: 22px; }
/* Tablas anchas (Estadísticas) → scroll horizontal en vez de recortar. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ─────────────────────────────────────────────────────────────────────
TABLA DE POSICIONES — responsive por ancho (pedido del cliente):
· Vertical (≤640px): compacta → Equipo · PJ · DG · PTS (sin numeración).
· Horizontal / tablet: la tabla COMPLETA; si no cabe, se desliza en
horizontal (no se recorta nada).
───────────────────────────────────────────────────────────────────── */
/* La caja de la tabla deja de recortar: en móvil/tablet la tabla completa
se desliza. En desktop cabe, así que no aparece barra. */
@media (max-width: 1024px) {
.table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
}
/* ── Vertical / celular angosto: tabla compacta a pantalla completa ── */
@media (max-width: 640px) {
/* Full-width: casi sin márgenes laterales de página en la Tabla. */
.page { padding-left: 8px; padding-right: 8px; }
.main { padding-left: 8px; padding-right: 8px; }
/* Layout fijo → el nombre se recorta con "…" de forma fiable (antes
chocaba con la columna siguiente y se veía el "error" del medio). */
.standings { table-layout: fixed; width: 100%; }
/* Quitar la numeración (#): el orden de filas ya indica la posición.
Se conserva la barrita de color (clasificación / descenso).
OJO: .col-pos es display:flex por defecto y eso rompe table-layout:fixed
(deja un hueco fantasma). Lo forzamos a celda de tabla centrada. */
.standings th.col-pos { font-size: 0; }
.standings th.col-pos,
.standings td.col-pos { display: table-cell; text-align: center; vertical-align: middle; width: 16px; padding-left: 4px; padding-right: 0; }
.col-pos .pos-num { display: none; }
.col-pos .pos-bar { display: inline-block; vertical-align: middle; }
/* Anchos fijos de las columnas numéricas visibles; el resto va al nombre. */
.standings th.col-pj,
.standings th.col-dg,
.standings th.col-pts { width: 44px; }
.standings th.col-name { width: auto; }
.standings th, .standings td { padding-left: 5px; padding-right: 5px; }
/* El nombre ocupa el espacio restante y se recorta con puntos suspensivos. */
.standings .col-name { max-width: none; }
.team-cell { min-width: 0; }
.team-cell-text { min-width: 0; overflow: hidden; }
.team-cell-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Drawer / modal del club: tamaños de letra reducidos ── */
.team-hero { gap: 14px; padding: 20px 16px; margin-bottom: 20px; }
.team-hero .crest-img { width: 56px !important; height: 56px !important; padding: 6px !important; }
.team-hero-name { font-size: clamp(24px, 8vw, 34px); margin: 6px 0 12px; }
.team-hero-stats { flex-wrap: wrap; gap: 8px 16px; font-size: 12px; }
.team-hero-stats b { font-size: 17px; }
/* Filas de partidos del drawer: 6 celdas (fecha·L/V·escudo·rival·result·estado)
compactadas para que no se desborden; el rival se recorta con "…". */
.team-match { grid-template-columns: 40px 18px 22px minmax(0, 1fr) auto auto; gap: 6px; padding: 10px 10px; font-size: 12px; }
.team-match .tm-opp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-match .tm-status { font-size: 10px; padding: 3px 7px; }
}