/* Solo maquetación. Todo el color (enlaces, .btn-primary, halo de foco, validación, franja de
   ErrorBoundary) vive en wwwroot/css/theme.css — ver el comentario de cabecera de ese archivo
   sobre por qué theme.css manda y por qué un color aquí lo anularía en silencio.
   Los @font-face de Inter/Playfair Display se movieron a theme.css (Task 3); ese archivo vive
   un nivel más adentro (wwwroot/css/) que este (wwwroot/), de ahí el ../lib/fonts/... allá. */

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.blazor-error-boundary::after {
    content: "Ocurrió un error."
}

/* ---- Chrome compartido: sidebar + topbar (MainLayout, PanelLayout, AdminLayout) ----
   Solo maquetación — el color de .sidebar, .app-topbar y #blazor-error-ui vive en
   wwwroot/css/theme.css, bajo los mismos selectores.

   Por qué vive aquí y no en un Componente.razor.css: el aislamiento de CSS de Blazor compila
   cada .razor.css a un selector con atributo de alcance (p. ej. .sidebar[b-abc123]) que SOLO
   aplica a los elementos que ESE archivo .razor renderiza. Esta maquetación vivía repartida entre
   MainLayout.razor.css y NavMenu.razor.css, pero PanelLayout y AdminLayout repiten el mismo
   markup de sidebar/topbar a mano — no reusan <NavMenu/> ni heredan de MainLayout — así que esas
   reglas scoped nunca les llegaban: .sidebar sin ancho ni sticky, .page sin flex-row en
   escritorio, el checkbox del menú móvil visible en vez de oculto (el bug real detectado en la
   Tarea 8). app.css no pasa por el aislamiento — se sirve tal cual desde wwwroot/ — así que aquí
   sí lo comparten los tres layouts.

   .navbar-brand, .navbar-toggler, .navbar-toggler-icon, .nav-item y .nav-link son también
   nombres de clase de los propios componentes de navbar/nav-tabs de Bootstrap, así que van con el
   prefijo ".sidebar" para no filtrarse a un <nav>/<ul class="nav-tabs"> que aparezca en una
   pantalla futura fuera de este cromo (hoy ningún otro archivo usa esas clases — ver el grep de
   verificación en el reporte de esta tarea). .top-row, .app-topbar, .page y #blazor-error-ui son
   nombres propios del proyecto, sin ese riesgo, y quedan sin prefijo. */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.top-row {
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row a, .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row a:hover, .top-row .btn-link:hover {
        text-decoration: underline;
    }

    .top-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* El sidebar arranca colapsado y solo el checkbox del menú móvil lo abre. El @media de escritorio,
   hasta el final del archivo, repite el selector .sidebar .nav-scrollable para volver a mostrarlo.
   Cubierto por SidebarCssTests. */
.sidebar .nav-scrollable {
    display: none;
}

.sidebar .navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

.sidebar .navbar-brand {
    font-size: 1.1rem;
}

.sidebar .navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    opacity: 0;
}

.sidebar .navbar-toggler-icon {
    cursor: pointer;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    width: 3.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.sidebar .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.sidebar .nav-item:first-of-type {
    padding-top: 1rem;
}

.sidebar .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.sidebar .nav-item .nav-link {
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
}

/* Banner de reconexión de Blazor Server. Aparece en MainLayout.razor y PanelLayout.razor (no en
   AdminLayout: su única pantalla de hoy no declara @rendermode, así que no hay circuito que
   reconectar). El color vive en wwwroot/css/theme.css, bajo el mismo selector de ID. */
#blazor-error-ui {
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Logo del restaurante en /panel/negocio. */
.business-logo {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

/* ---- Media queries, al final a propósito ----
   Varias de estas reglas repiten un selector de las reglas base de arriba (.top-row,
   .sidebar .nav-scrollable, .sidebar .navbar-toggler) con la MISMA especificidad: envolver una
   regla en un @media no aporta especificidad. A igualdad de peso decide el orden de aparición, así
   que un @media solo puede sobrescribir su regla base si va después. Tenerlos todos al final es lo
   que hace que eso se cumpla por construcción y no por casualidad — cuando el bloque de escritorio
   vivía a media hoja, el .sidebar .nav-scrollable de más abajo le ganaba y el sidebar se quedaba
   sin un solo enlace en los tres layouts. Regla para quien edite este archivo: reglas base arriba,
   media queries abajo, y nada nuevo después de este bloque. */
@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .sidebar .navbar-toggler {
        display: none;
    }

    .sidebar .nav-scrollable {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Bloques del panel de estilo del editor (Fase 6). La maquetación la comparten los seis bloques, y
   vive aquí y no en un .razor.css porque el CSS aislado de Blazor se ata a un solo componente: cada
   archivo compila a un selector con su propio atributo, así que no hay manera de compartirlo.

   Se agrega AL FINAL a propósito: más arriba conviven las dos reglas `.sidebar .nav-scrollable`
   cuyo orden relativo guarda SidebarCssTests, y meter algo entre ellas es exactamente el error que
   esa prueba existe para atrapar. */
.bloque {
    padding: calc(var(--app-space-unit) * .75) 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.bloque-titulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    margin-bottom: calc(var(--app-space-unit) * .5);
}

.bloque-fila {
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * .5);
    margin-bottom: .35rem;
}

.bloque-etiqueta {
    flex: 0 0 6.5rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.bloque-valor {
    flex: 0 0 3.5rem;
    font-size: .75rem;
    text-align: right;
    color: var(--bs-secondary-color);
}

/* Galería de plantillas y confirmación de aplicar (Fase 7). Van aquí y no en un .razor.css por lo
   mismo que los bloques: el CSS aislado de Blazor se ata a un solo componente. */
.editor-galeria {
    padding: var(--app-space-unit);
}

.editor-galeria-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(var(--app-space-unit) * .5);
    text-align: left;
    padding: calc(var(--app-space-unit) * .75);
    margin-bottom: .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: transparent;
    color: var(--bs-body-color);
}

.editor-galeria-item.is-seleccionada {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

.editor-galeria-item:disabled {
    opacity: .55;
}

.editor-galeria-nombre {
    flex: 1;
}

.editor-galeria-candado {
    color: var(--bs-secondary-color);
}

.editor-confirmacion {
    padding: calc(var(--app-space-unit) * .75);
    border: 1px solid var(--bs-danger);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-secondary-bg);
}