/** ------------------------------------------------------------------
 *  layout.css — armazón: barra superior, panel lateral y contenido
 *  ------------------------------------------------------------------ */

/* ── Barra superior ───────────────────────────────────────────────── */
.barra-superior {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--alto-barra);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.2rem;
    background-color: var(--fondo-2);
    border-bottom: 1px solid var(--borde);
}

.marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--texto);
    text-decoration: none;
    margin-right: auto;
}
.marca:hover { text-decoration: none; }

.marca__icono {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radio-sm);
    background: linear-gradient(140deg, var(--primario), #ff8f00);
    color: #1a1400;
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: .8rem;
}

.marca__texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca__texto strong { font-size: 1rem; }
.marca__texto small { color: var(--texto-3); font-size: .74rem; }

.barra-superior__acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.boton-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 34px;
    padding: 0 8px;
    background-color: var(--fondo-3);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    cursor: pointer;
}
.boton-menu span {
    display: block;
    height: 2px;
    background-color: var(--texto-2);
    border-radius: 2px;
}

/* ── Cuerpo ───────────────────────────────────────────────────────── */
.cuerpo {
    display: grid;
    grid-template-columns: var(--ancho-lateral) 1fr;
    min-height: calc(100vh - var(--alto-barra));
}

.panel-lateral {
    position: sticky;
    top: var(--alto-barra);
    align-self: start;
    height: calc(100vh - var(--alto-barra));
    overflow-y: auto;
    padding: 1.2rem 1rem 3rem;
    background-color: var(--fondo-2);
    border-right: 1px solid var(--borde);
}

.panel-lateral__cabecera h2 {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-3);
}

.panel-lateral__resumen {
    font-size: .8rem;
    color: var(--texto-3);
    margin-bottom: 1rem;
}

.contenido {
    padding: 2rem 2.4rem 5rem;
    max-width: 1080px;
    width: 100%;
    /* Centra el contenido dentro de la columna cuando sobra espacio */
    margin: 0 auto;
    /* Sin esto, un bloque de código ancho estira la columna del grid */
    min-width: 0;
    outline: none;
}

.velo {
    display: none;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .cuerpo { grid-template-columns: 1fr; }

    .boton-menu { display: flex; }

    .panel-lateral {
        position: fixed;
        top: var(--alto-barra);
        left: 0;
        z-index: 35;
        width: min(320px, 86vw);
        transform: translateX(-102%);
        transition: transform .25s ease;
        box-shadow: var(--sombra);
    }
    .panel-lateral.abierto { transform: translateX(0); }

    .velo {
        display: block;
        position: fixed;
        inset: var(--alto-barra) 0 0 0;
        z-index: 30;
        background-color: rgb(0 0 0 / 55%);
    }
    .velo[hidden] { display: none; }

    .contenido { padding: 1.4rem 1.1rem 4rem; }

    .marca__texto small { display: none; }
    .barra-superior { padding: 0 .8rem; gap: .7rem; }
}

@media (max-width: 620px) {
    .interruptor__etiqueta { display: none; }
    #boton-reiniciar { display: none; }
}