/*
 * Identidad de marca (docs/07). Hoja base de todo el sistema fuera de la pantalla de carga,
 * que tiene la suya (live-entry.css).
 *
 * NO hay Bootstrap debajo. Se saco: ninguna pagina lo usaba —todas estaban escritas con
 * clases live-*— y lo unico que hacia era pelearse con estas reglas. La mezcla a medias se
 * veia peor que cualquiera de las dos opciones puras: el navbar salia apilado en vertical
 * porque .navbar-collapse imponia su propio display.
 *
 * Tipografias (docs/07): Unbounded para display, Space Grotesk para cuerpo, Space Mono para
 * datos y labels. Van servidas desde el propio sitio (css/fonts.css); el stack de respaldo
 * queda igual por si un archivo no llega.
 *
 * REGLA DEL LIMA: un solo elemento lima por vista. Es el color de la marca y funciona
 * porque es escaso; repartido en cinco lugares deja de significar nada. En cada pantalla el
 * lima esta reservado para la accion principal, y todo lo demas vive en bone / muted.
 */

:root {
    --night: #101418;
    --slate: #161D25;
    --line:  #28323B;
    --court: #2C3B49;
    --grid:  #5A6B79;
    --bone:  #EDEFEA;
    --muted: #8B97A0;
    --lime:  #C6FF3D;
    --green: #57C86B;
    --amber: #E8B93E;
    --red:   #EE6055;

    --font-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

body {
    margin: 0;
    background: var(--night);
    color: var(--bone);
    font-family: var(--font-body);
    line-height: 1.5;
}

/* Unbounded Medium para titulos; el Ultra Bold queda para el logotipo, que es lo unico que
   tiene que gritar (docs/07 usa los dos pesos, cada uno en su lugar). */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.02em;
}

a { color: var(--bone); }

/*
 * 84rem y no 68: lo que vive adentro son tablas de jugadores y listados de partidos con sus
 * sets, no texto de venta. Con el ancho anterior, en monitor quedaba una columna angosta al
 * medio con medio ancho de pantalla vacio a cada lado y las tablas apretandose solas.
 *
 * El padding crece con la ventana en vez de quedar clavado en 1.25rem: pegado al borde en un
 * monitor grande se ve tan mal como comprimido al medio.
 */
.brand-container {
    max-width: 84rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}

.brand-main { padding-bottom: 3rem; }

/* ── Wordmark ─────────────────────────────────────────────────────────────── */
/*
 * "Sand" + "S" en lima + "tats". La S del medio es la marca; con todo del mismo color el
 * logotipo se pierde y queda una palabra cualquiera.
 */

.brand-wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--bone);
    text-decoration: none;
    white-space: nowrap;
}

.brand-wordmark-accent { color: var(--lime); }

/* ── Barra de navegacion ──────────────────────────────────────────────────── */

.brand-nav {
    background: var(--slate);
    border-bottom: 1px solid var(--line);
}

/*
 * CONTENEDOR PROPIO, mas ancho que el del cuerpo. Son dos anchos porque resuelven cosas
 * distintas: la barra quiere la pantalla, el contenido quiere una medida legible —una tabla de
 * reporte de 1900px se lee peor, y el PDF esta calibrado a 703px utiles—.
 *
 * Compartiendo `brand-container` la barra quedaba cortada a 84rem. Medido, pedia ~111rem con
 * las seis secciones sueltas y el nombre de usuario entero, asi que envolvia en DOS RENGLONES
 * en cualquier monitor. Se arregla con las dos cosas: soltar el ancho aca, y agrupar Datos en
 * un rubro con desplegable. Agrupada la barra pide ~63rem y entra hasta en 1280.
 *
 * `flex-wrap` se queda como red de seguridad del telefono, donde el menu SI tiene que bajar a
 * su renglon. Lo que se arreglo es que no se dispare en una pantalla grande.
 */
.brand-nav-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.6rem;
    max-width: 120rem;
    margin: 0 auto;
    padding: .5rem clamp(1.25rem, 3vw, 2.5rem);
    min-height: 3.75rem;
}

.brand-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    flex: 0 0 auto;
}

.brand-logo {
    width: 2rem;
    height: 2rem;
    display: block;
}

.brand-brand .brand-wordmark { font-size: 1.2rem; }

/* La tagline acompana al logotipo, no es un item de menu: por eso vive al lado de la marca
   y no dentro de la lista, que es donde quedaba flotando debajo. */
.brand-tagline {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-left: 1px solid var(--line);
    padding-left: 1rem;
    flex: 0 0 auto;
}

.brand-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;

    /* Base 100% para que el menu se baje ENTERO a su renglon en vez de partirse por la mitad:
       una seccion sola colgando debajo de las otras cinco se lee como si fuera otra cosa. */
    flex: 1 1 22rem;
}

.brand-link {
    font-family: var(--font-mono);
    color: var(--muted);
    text-decoration: none;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .45rem .7rem;
    border-radius: .4rem;
    display: block;
    white-space: nowrap;

    /* El toggle del desplegable es un <button> y hereda del navegador: sin esto sale con la
       tipografia y el fondo del sistema en vez de los de la barra. */
    background: none;
    border: 0;
    cursor: pointer;
}

/*
 * Hover y activo NO pueden verse igual. Antes compartian la misma regla, asi que el subrayado
 * aparecia solo bajo el mouse y el nav nunca decia en que seccion se estaba parado.
 * El hover es un anticipo —solo aclara el texto—; el activo es un estado, y lleva la barra.
 */
.brand-link:hover { color: var(--bone); background: rgba(237, 239, 234, .05); }

/*
 * El activo NO puede cambiar de peso. Antes sumaba `font-weight: 700` sobre una fuente mono, y
 * eso lo ENSANCHA: al navegar, el item activo empuja a los de al lado y el menu entero se
 * mueve. Lo dicen el fondo y la barra, que no ocupan lugar.
 */
.brand-link[aria-current="page"] {
    color: var(--bone);
    background: rgba(198, 255, 61, .1);
    box-shadow: inset 0 -2px 0 var(--lime);
}

/* ── Rubro con desplegable ────────────────────────────────────────────────── */

.brand-drop { position: relative; }

.brand-drop-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* La flecha se dibuja con bordes: un caracter tipografico cambia de forma segun la fuente que
   termine cargando, y con `font-display: swap` eso se ve saltar. */
.brand-drop-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border: .26rem solid transparent;
    border-top-color: currentColor;
    margin-top: .26rem;
}

.brand-drop-panel {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 12rem;
    background: var(--slate);
    border: 1px solid var(--line);
    border-radius: .6rem;
    padding: .35rem;
    margin: 0;
    list-style: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    z-index: 20;

    /* `visibility` ademas de `opacity`: con opacity sola el panel sigue capturando el mouse
       invisible y tapa lo que hay debajo. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.35rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

/* `:hover` para el mouse y `:focus-within` para el teclado y el dedo. Los dos sobre el <li>,
   asi el panel sigue abierto mientras se recorre. Sin una linea de JS. */
.brand-drop:hover .brand-drop-panel,
.brand-drop:focus-within .brand-drop-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .brand-drop-panel { transition: none; }
}

/* La accion principal del producto. Es el unico lima del nav: si hubiera dos, no habria
   principal. */
.brand-new {
    background: var(--lime);
    border: 1px solid var(--lime);
    border-radius: .4rem;
    color: var(--night);
    padding: .4rem .9rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}

.brand-new:hover { filter: brightness(1.08); }

/* El acceso a la propia cuenta, en dos letras. Con el nombre entero —y peor con un mail— eran
   ~14rem de barra, y era de lo que mas la empujaba fuera de la pantalla. */
.brand-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    text-decoration: none;
    background: var(--court);
    border: 1px solid var(--grid);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
}

.brand-avatar:hover {
    border-color: var(--lime);
    color: var(--lime);
}

.brand-signout {
    background: none;
    border: 1px solid var(--line);
    border-radius: .4rem;
    color: var(--muted);
    padding: .4rem .9rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    flex: 0 0 auto;
}

.brand-signout:hover {
    color: var(--bone);
    border-color: var(--muted);
}

/*
 * La tagline es decoracion y es lo primero que sobra. El umbral se elige MIDIENDO, no a ojo:
 * con ella la barra entra hasta ~1400px y a 1250 se pasa al segundo renglon. 84rem (1344px)
 * cae entre los dos, asi que la barra queda en un renglon en todo el rango util.
 */
@media (max-width: 84rem) {
    .brand-tagline { display: none; }
}

/* Pantalla angosta: el menu se apila abajo pero en fila, no en columna. */
@media (max-width: 46rem) {
    .brand-nav-inner { gap: .75rem 1.25rem; }
    .brand-menu { order: 3; width: 100%; gap: .35rem; }

    /* El panel se ancla a la derecha si el rubro quedo cerca del borde: al ras del margen
       izquierdo, un panel de 12rem se sale de la pantalla y no hay como leerlo. */
    .brand-drop-panel { left: auto; right: 0; }
}

/* ── Login ────────────────────────────────────────────────────────────────── */

.brand-login {
    margin: 5rem auto 0;
    max-width: 24rem;
    text-align: center;
}

.brand-login .brand-logo {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto .9rem;
}

.brand-login .brand-wordmark {
    font-size: 2rem;
    display: block;
}

.brand-login form { text-align: left; }

.live-check {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.live-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--muted);
}

.live-check-label {
    color: var(--muted);
    font-size: .9rem;
}

/* ── Home ─────────────────────────────────────────────────────────────────── */

/* Saludo a la izquierda, marca a la derecha. En angosto la marca pasa abajo del texto en vez
   de pelearle el ancho al titulo. */
.brand-home {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 3rem 0 2.5rem;
}

.brand-home-text { flex: 1 1 22rem; }

.brand-home-title { font-size: clamp(2rem, 3.4vw, 3rem); margin: 0 0 .3rem; }

.brand-home-sub {
    font-family: var(--font-mono);
    color: var(--muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 1.25rem;
}

/* Ancho en ch y no en rem: lo que hace legible una bajada es cuantos caracteres entran por
   linea, y eso no cambia cuando cambia el cuerpo de la letra. */
.brand-home-lede {
    font-size: 1.15rem;
    color: var(--bone);
    max-width: 42ch;
    margin: 0;
}

/* La marca de agua del home. El lima que trae es identidad, no accion: la regla del lima
   sigue intacta porque la unica ACCION lima de la vista es Cargar partido. */
.brand-home-art {
    width: min(13rem, 26vw);
    height: auto;
    opacity: .9;
    flex: 0 0 auto;
}

.brand-error-title { color: var(--red); }

.brand-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* La accion principal es la unica lima de la vista. */
.brand-action {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: .5rem;
    padding: .9rem 1.4rem;
    text-decoration: none;
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.brand-action:hover { border-color: var(--muted); }

.brand-action-primary {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--night);
    font-weight: 700;
}

.brand-action-primary:hover { filter: brightness(1.08); border-color: var(--lime); }