/* =====================================================================
   ProHockey — Sitio público (celular primero)
   Identidad: grises pizarra, tarjetas blancas muy redondeadas, chips en píldora,
   barra de navegación flotante abajo. Los colores de la paleta se usan solo para resaltar.
   Ver 03_GUIA_VISUAL.md
   ===================================================================== */

/* Inter (local): solo se descarga si el dispositivo no tiene San Francisco (iOS/macOS) ni Roboto (Android). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2"); }

:root {
    /* Base de la identidad: pizarra */
    --pizarra-900: #2f3846;
    --pizarra-700: #566275;
    --pizarra-500: #646e7e;
    --pizarra-200: #e3e6ea;
    --pizarra-100: #f1f2f4;
    --fondo: #ededed;
    --blanco: #ffffff;

    /* Resaltados (paleta del usuario) */
    --azul: #0191b4;
    --celeste: #35bbca;
    --amarillo: #f8d90f;
    --lima: #d3dd18;
    --naranja: #fe7a15;
    --rojo: #d62828;
    --azul-suave: #e1f2f7;      --azul-texto: #016a85;
    --celeste-suave: #def4f6;   --celeste-texto: #136f79;
    --lima-suave: #f2f6cc;      --lima-texto: #545900;
    --naranja-suave: #ffecdc;   --naranja-texto: #a04600;

    /* Tipografía: San Francisco en iOS/macOS, Roboto en Android, Inter en el resto. */
    --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;

    --radio-caja: 22px;
    --pildora: 999px;
    --sombra: 0 1px 2px rgba(47, 56, 70, .04), 0 4px 16px rgba(47, 56, 70, .05);
    --margen: 16px;
    --toque: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.45;
    color: var(--pizarra-900);
    background: var(--fondo);
    overflow-x: hidden;
    /* Lugar para la barra de navegación flotante */
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

a { color: var(--azul-texto); }
:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }

/* ---------- Cabecera con selector de torneo y categoría (fija arriba) ---------- */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--fondo);
    padding: calc(10px + env(safe-area-inset-top)) var(--margen) 10px;
}
.cabecera__fila { display: flex; align-items: center; gap: 12px; min-height: var(--toque); margin-bottom: 10px; }
.cabecera__logo {
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border-radius: 50%;
    background: var(--naranja);
    color: var(--pizarra-900);
    flex: none;
}
.cabecera__marca { color: var(--pizarra-900); text-decoration: none; font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.cabecera__marca small { display: block; font-weight: 400; font-size: .8rem; color: var(--pizarra-500); }

.selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.selector__campo { position: relative; min-width: 0; }
.selector__campo span {
    position: absolute;
    top: 7px;
    left: 18px;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pizarra-500);
    pointer-events: none;
}
.selector select {
    width: 100%;
    height: 52px;
    padding: 16px 32px 0 18px;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--pizarra-900);
    background: var(--blanco);
    border: 0;
    border-radius: var(--pildora);
    box-shadow: var(--sombra);
    text-overflow: ellipsis;
}
.selector select:disabled { color: var(--pizarra-500); }

/* ---------- Contenido ---------- */

.contenido { padding: 6px var(--margen) var(--margen); max-width: 720px; margin: 0 auto; }

.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio-caja);
    box-shadow: var(--sombra);
    padding: var(--margen);
    margin-bottom: 12px;
}
.tarjeta--vacia { text-align: center; padding: 36px var(--margen); }
.tarjeta--vacia h1 { font-size: 1.5rem; font-weight: 600; margin: 16px 0 8px; }
.tarjeta--vacia p { color: var(--pizarra-500); margin: 0 auto 12px; max-width: 34ch; }
.tarjeta__icono {
    display: inline-grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--celeste-suave);
    color: var(--celeste-texto);
    font-size: 2.1rem;
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--toque);
    padding: 0 20px;
    border-radius: var(--pildora);
    background: var(--pizarra-700);
    color: var(--blanco);
    text-decoration: none;
    font-weight: 600;
}

/* Chips de color para resaltar (estado del partido, clasificados, etc.) */
.etiqueta { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--pildora); font-size: .75rem; font-weight: 600; background: var(--pizarra-100); color: var(--pizarra-700); }
.etiqueta--lima { background: var(--lima-suave); color: var(--lima-texto); }
.etiqueta--naranja { background: var(--naranja-suave); color: var(--naranja-texto); }
.etiqueta--azul { background: var(--azul-suave); color: var(--azul-texto); }
.etiqueta--celeste { background: var(--celeste-suave); color: var(--celeste-texto); }

/* Tablas anchas: se desplazan dentro de su caja, nunca la página. */
.desplazable { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pie { text-align: center; color: var(--pizarra-500); font-size: .85rem; padding: 16px var(--margen); }

/* ---------- Barra de navegación flotante (secciones) ---------- */

.navegacion {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    width: calc(100% - 2 * var(--margen));
    max-width: 480px;
    justify-content: space-between;
    background: var(--pizarra-700);
    border-radius: var(--pildora);
    box-shadow: 0 10px 30px rgba(47, 56, 70, .28);
}
.navegacion__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: var(--toque);
    height: 48px;
    padding: 0 12px;
    border-radius: var(--pildora);
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
}
.navegacion__item i { font-size: 1.1rem; }
.navegacion__item span { display: none; }
.navegacion__item.activo { background: var(--blanco); color: var(--pizarra-900); padding: 0 16px; }
.navegacion__item.activo span { display: inline; }