/* Marco de la administración de wsfirst: cabecera, menú y contenido. Los
   colores salen de las variables de theme.css (--accent, --surface...);
   un proyecto puede redefinirlas. */
body.admin-shell {
    display: grid;
    grid-template-columns: 14rem 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header"
        "nav main";
    min-height: 100vh;
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-inter);

    & .admin-shell-header {
        grid-area: header;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.25rem;
        background: var(--bg-secondary);
        color: var(--text-inverse);

        & .admin-shell-brand {
            color: var(--text-inverse);
            font-weight: 700;
            text-decoration: none;
            margin-right: auto;
        }

        & .admin-shell-user {
            color: var(--text-inverse-muted);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    & .admin-shell-nav {
        grid-area: nav;
        padding: 1rem 0.75rem;
        border-right: 1px solid var(--border);
        background: var(--surface);

        & ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        & .admin-nav-section {
            margin: 1rem 0.75rem 0.25rem;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        & a {
            display: block;
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            text-decoration: none;

            &:hover {
                background: var(--surface-subtle);
            }

            &[aria-current="page"] {
                background: var(--accent-soft);
                color: var(--accent);
                font-weight: 600;
            }
        }
    }

    & .admin-shell-main {
        grid-area: main;
        padding: 1.5rem;
        min-width: 0;
    }
}

@media (max-width: 48rem) {
    body.admin-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "nav"
            "main";

        & .admin-shell-nav {
            border-right: none;
            border-bottom: 1px solid var(--border);
        }
    }
}

body.admin-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    background: var(--bg-primary);
    font-family: var(--font-inter);

    & form {
        display: grid;
        gap: 0.75rem;
        width: min(22rem, 90vw);
        padding: 2rem;

        & label {
            display: grid;
            gap: 0.25rem;
        }

        & output {
            color: var(--error);
        }
    }
}