/* layout.css — page shell: sticky bar, sections panel, container, section rhythm, hero and footer. */ /* ---- Barra fija --------------------------------------------------------- */ .barra { position: sticky; top: 0; z-index: 50; background: var(--c-card); /* opaque on purpose: text-dense page */ border-block-end: 1px solid var(--c-border); } .barra__int { height: var(--nav-h); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--sp-3); } .barra__marca { font-family: var(--ff-display); font-size: 1.125rem; letter-spacing: var(--ls-display); white-space: nowrap; } .barra__actual { flex: 1 1 auto; min-width: 0; /* lets the ellipsis actually work */ font-size: var(--fs-small); color: var(--c-text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra__btn { flex: none; min-height: 44px; padding: var(--sp-2) var(--sp-4); background: var(--c-accent-soft); color: var(--c-accent-strong); border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 600; transition: background var(--dur-fast) var(--ease-out); } .barra__btn:hover { background: var(--c-accent-soft-hi); } /* ---- Panel de secciones ------------------------------------------------- */ .panel { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; } .panel[hidden] { display: none; } .panel__fondo { position: absolute; inset: 0; background: rgba(27, 33, 25, .45); } .panel__caja { position: relative; background: var(--c-card); box-shadow: var(--shadow-panel); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--gutter) var(--sp-6); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); } .panel__cab { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2); padding-block-end: var(--sp-4); border-block-end: 1px solid var(--c-border); } .panel__titulo { grid-column: 1; grid-row: 1; font-size: var(--fs-subtitle); } .panel__cuenta { grid-column: 1; grid-row: 2; font-size: var(--fs-small); color: var(--c-text-muted); } .panel__cerrar { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-pill); color: var(--c-text-muted); } .panel__cerrar svg { width: 22px; height: 22px; } .panel__cerrar:hover { background: var(--c-surface); color: var(--c-text); } .panel__lista { list-style: none; padding: 0; margin-block: var(--sp-2); } .panel__fila { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; /* primary navigation on a phone */ padding: var(--sp-2) 0; color: inherit; text-decoration: none; border-block-end: 1px solid var(--c-border); } .panel__fila:hover .panel__nom { color: var(--c-accent); } .panel__num { flex: none; width: 1.75rem; font-family: var(--ff-display); font-size: 1.125rem; color: var(--c-text-muted); } .panel__nom { flex: 1 1 auto; } .panel__fila[aria-current="true"] .panel__nom { color: var(--c-accent); font-weight: 600; } .panel__test { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 52px; margin-block-start: var(--sp-4); background: var(--c-accent); color: var(--c-card); border-radius: var(--r-md); text-decoration: none; font-weight: 600; } .panel__test svg { width: 18px; height: 18px; } .panel__test:hover { background: var(--c-accent-strong); color: var(--c-card); } .panel__reset { display: block; margin: var(--sp-4) auto 0; min-height: 44px; padding-inline: var(--sp-3); background: none; border: 0; color: var(--c-text-muted); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 0.15em; } /* Set on while the panel is open, so the page behind cannot scroll. */ .sin-scroll { overflow: hidden; } /* ---- Hero --------------------------------------------------------------- */ .hero__int { padding-block: var(--sp-8) var(--sp-7); max-width: var(--container-narrow); } .hero__lead { margin-block-start: var(--sp-5); color: var(--c-text-muted); } .hero__acciones { margin-block-start: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* ---- Secciones ---------------------------------------------------------- */ .seccion { padding-block: var(--section-pad); border-block-start: 1px solid var(--c-border); } .seccion__int > .lead { margin-block-start: var(--sp-4); max-width: var(--measure); font-size: var(--fs-subtitle); line-height: var(--lh-snug); color: var(--c-text-muted); } /* Más aire encima de un encabezado que debajo: el título tiene que pertenecer visiblemente a lo que sigue, no flotar entre dos bloques iguales. */ .prosa h3 { margin-block-start: var(--sp-6); margin-block-end: var(--sp-2); } .tarjeta > h3:not(:first-child) { margin-block-start: var(--sp-6); } .prosa { max-width: var(--measure); /* El español tiene palabras largas y a 360px "individuales" o "reglamentario" abren huecos feos en un párrafo justificado a la izquierda. Con lang="es" el navegador silabea correctamente. */ hyphens: auto; } .prosa > * + * { margin-block-start: var(--sp-4); } /* Agrupar lo relacionado y separar lo distinto: el lead pertenece al título, así que va pegado; el diagrama es otro bloque y respira. */ .seccion__int > h2 + .lead { margin-block-start: var(--sp-3); } /* ---- Test --------------------------------------------------------------- */ .test { padding-block: var(--section-pad); background: var(--c-surface); border-block-start: 1px solid var(--c-border); } .test__int > h2 { margin-block-start: var(--sp-2); } .test .tarjeta { margin-block-start: var(--sp-5); } /* ---- Pie ---------------------------------------------------------------- */ .pie { padding-block: var(--sp-7); border-block-start: 1px solid var(--c-border); font-size: var(--fs-small); color: var(--c-text-muted); } .pie p + p { margin-block-start: var(--sp-2); } /* ========================================================================== PASE RESPONSIVE (Fase 7) Enfoque híbrido: clamp() para todo lo que escala en magnitud (ya está en tokens.css), y @media solo para cambios de estructura. Breakpoints en uso: 480px, 768px, 1024px, más dos consultas de orientación. No agregar otros. ========================================================================== */ /* ---- 768px: hay lugar para más nav -------------------------------------- */ @media (min-width: 768px) { .barra__actual { text-align: start; padding-inline-start: var(--sp-4); } /* El panel sigue siendo un panel, no se convierte en una nav horizontal: esto es un ensanchamiento del layout móvil, no un rediseño. */ .panel__caja { max-width: 34rem; margin-inline: auto; border-radius: var(--r-lg); margin-block-start: var(--sp-4); } } /* ---- 1024px: columna centrada ------------------------------------------- */ @media (min-width: 1024px) { /* La prosa queda al ancho de medida y los diagramas pueden ser más anchos: es la relación correcta en una página guiada por dibujos. */ .seccion__int { display: grid; } .seccion__int > h2, .seccion__int > .lead, .seccion__int > .prosa { max-width: var(--measure); } .hero__int { max-width: 48rem; } } /* ---- Teléfono acostado -------------------------------------------------- Caso real: alguien mira el partido en la tele y gira el teléfono. Con la barra fija más un diagrama a altura completa no queda casi nada de alto. */ @media (orientation: landscape) and (max-height: 480px) { .seccion { padding-block: var(--sp-6); } .hero__int { padding-block: var(--sp-6) var(--sp-5); } .test { padding-block: var(--sp-6); } .diagrama > svg, .diagrama__celda .cancha, .diagrama__celda .recorte, .diagrama--grafico > svg, .diagrama--recorte .recorte { max-height: 62vh; width: auto; } .diagrama { display: flex; flex-direction: column; align-items: center; } /* Diez filas no entran a lo alto: el panel scrollea y el botón de cerrar tiene que seguir alcanzable. */ .panel__caja { max-height: 100vh; } .panel__cab { position: sticky; top: 0; background: var(--c-card); z-index: 1; } }