/* ── Variables compartidas (complementan las de sidebar.css) ─────────── */
:root {
    --sb-width: 220px;
    --gold:      #d5b680;
    --text:      #f2e8da;
    --muted:     #bda98a;
    --wood-mid:  #5f412d;
    --wood-light:#8d6242;
    --line:      rgba(213, 182, 128, .18);
}

/* ── Base ────────────────────────────────────────────────────────────── */
body {
    font-family: 'Public Sans', sans-serif;
    background: #14100d;
    color: var(--text);
    margin: 0;
}

/* ── Área de contenido principal (desplazada por el sidebar fijo) ───── */
.layout-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.has-sidebar .layout-page {
    margin-left: var(--sb-width);
}

.content-wrapper {
    flex: 1;
    padding: 1.75rem;
}

/* ── Barra de navegación superior ───────────────────────────────────── */
.top-navbar {
    background: rgba(20, 16, 13, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
    color: var(--text);
}

.nav-role {
    color: var(--muted);
    font-size: .82rem;
}

.nav-brand-sm {
    font-family: Georgia, serif;
    font-weight: 700;
    color: var(--text);
    font-size: 1.05rem;
}

/* ── Botones compartidos (disponibles en todo el layout) ────────────── */
.btn-wood {
    background: linear-gradient(135deg, var(--wood-light), var(--wood-mid));
    color: #fff;
    border: 0;
    font-weight: 600;
}

.btn-wood:hover {
    filter: brightness(1.15);
    color: #fff;
}

.btn-ghost {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
}

.btn-ghost:hover {
    background: rgba(213, 182, 128, .1);
    color: var(--gold);
}

/* ── Mobile: sin margen izquierdo cuando el sidebar está oculto ─────── */
@media (max-width: 1199px) {
    .layout-page {
        margin-left: 0;
    }
}