/* Maquetación propia que las utilidades bb: de Blazor Blueprint no cubren: rejillas que se recolocan solas
   (auto-fill), anchos máximos de página y lo que cambia en 640, 768, 1024, 1280 y 1600 px.
   Reglas (una prueba las comprueba):
   - Solo clases app- puestas en elementos propios (div, span, main…), nunca en un componente Bb*.
   - Ningún selector entra en la librería: nada de [data-slot], button, table, svg, «> *» ni clases repetidas.
   - Ni colores, ni fuentes, ni paddings de componentes: eso sale de los componentes, de sus parámetros y de las
     utilidades bb: en el marcado. Los colores y fuentes del tema viven solo en tema-acero.css. */

/* ---- Marco ---- */

.app-main {
    padding: 1.5rem;
}

.app-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 90rem;
}

/* Pantallas de una sola tarjeta (el permiso de una aplicación). */
.app-page-narrow {
    max-width: 40rem;
}

/* Blazor enfoca el h1 al navegar: sin el contorno del foco programático. */
h1:focus {
    outline: none;
}

/* Cabecera de pantalla: el título ocupa lo que puede; en el móvil, las acciones bajan a su propia fila. */
.app-page-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-page-heading {
    flex: 1 1 24rem;
    min-width: 0;
}

/* ---- Rejillas ---- */

.app-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.app-card-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.app-form-grid {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.app-form-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.app-form-grid-narrow {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}

/* Una casilla por mes (evaluación del proveedor): se recolocan en filas según el ancho. */
.app-month-strip {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
}

.app-span-2 {
    grid-column: span 2;
}

.app-span-full {
    grid-column: 1 / -1;
}

/* Datos de cabecera de un documento: etiqueta encima del valor, en columnas que se recolocan. */
.app-facts {
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    padding-top: 0.75rem;
    font-size: 0.875rem;
}

.app-fact-wide {
    grid-column: span 2;
}

.app-detail-pair {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
}

/* Ficha: columna principal y lateral; en pantallas estrechas, una sola. */
.app-form-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.app-form-main,
.app-form-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.app-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

/* ---- Filtros de una lista: la búsqueda crece, cada filtro tiene su ancho y en el móvil se reparten la fila ---- */

.app-filter-search {
    flex: 1 1 18rem;
    min-width: 0;
}

.app-filter {
    flex: 0 1 12rem;
    min-width: 9rem;
}

.app-filter-wide {
    flex: 0 1 18rem;
    min-width: 12rem;
}

/* Conversión de unidades y línea de expedición: cada control con su ancho en la misma fila. */
.app-conversion-unit {
    flex: 1 1 9rem;
    min-width: 8rem;
}

.app-conversion-factor {
    flex: 0 1 7rem;
    min-width: 5rem;
}

.app-pick-source {
    flex: 1 1 18rem;
    min-width: 0;
}

/* Selector de periodo en la cabecera de una tarjeta: que quepa «Últimos 12 meses» sin partir. */
.app-period-pick {
    width: 12rem;
    max-width: 100%;
}

.app-pick-qty {
    flex: 0 1 10rem;
    min-width: 8rem;
}

/* ---- Lista y ficha a la vez en pantallas anchas; una de las dos en las estrechas ---- */

.app-master-detail,
.app-orders-split {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.app-master,
.app-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.app-master-detail.has-selection .app-master,
.app-master-detail:not(.has-selection) .app-detail,
.app-orders-split.has-selection .app-master,
.app-orders-split:not(.has-selection) .app-detail {
    display: none;
}

.app-back {
    align-self: flex-start;
}

/* Pestañas responsivas: BbTabsList deja su lista medida (invisible) a lo ancho cuando cambia al desplegable;
   se recorta en horizontal sin tapar el anillo de foco. */
.app-tabs-clip {
    min-width: 0;
    overflow-x: clip;
    overflow-clip-margin: 0.25rem;
}

/* ---- Tablet de puesto (/puesto) ---- */

.app-station-main {
    flex: 1;
    padding: 1.5rem 1rem;
}

.app-station-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

.app-profile-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

/* ---- Lo que se ve u oculta según el ancho ---- */

.app-show-sm,
.app-narrow-only {
    display: none;
}

@media (max-width: 639px) {
    .app-main,
    .app-station-main {
        padding: 1rem;
    }

    .app-hide-sm,
    .app-col-sm,
    .app-wide-only {
        display: none;
    }

    .app-show-sm {
        display: block;
        margin-top: 0.25rem;
    }

    .app-narrow-only {
        display: block;
    }

    .app-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .app-station-signout {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .app-col-md {
        display: none;
    }

    .app-filter,
    .app-filter-wide {
        flex: 1 1 10rem;
    }

    .app-span-2,
    .app-fact-wide {
        grid-column: auto;
    }

    .app-page-actions {
        width: 100%;
    }
}

@media (max-width: 1023px) {
    .app-col-lg {
        display: none;
    }
}

@media (min-width: 1280px) {
    .app-form-layout {
        grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
    }

    .app-master-detail {
        grid-template-columns: minmax(22rem, 30rem) minmax(0, 1fr);
    }

    .app-master-detail.has-selection .app-master,
    .app-master-detail:not(.has-selection) .app-detail {
        display: flex;
    }

    .app-master-detail .app-back {
        display: none;
    }
}

@media (min-width: 1600px) {
    .app-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-detail-lead {
        grid-row: span 2;
    }

    /* Pedidos: en un monitor ancho (24″) el pedido abierto queda a la derecha de la lista. */
    .app-orders-split {
        grid-template-columns: minmax(0, 1fr) minmax(34rem, 42rem);
    }

    .app-orders-split.has-selection .app-master {
        display: flex;
    }

    .app-orders-split:not(.has-selection) {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-orders-split .app-back {
        display: none;
    }
}

/* ---- Error de arranque de Blazor (fuera de los componentes) ---- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: var(--destructive);
    color: var(--destructive-foreground);
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}

/* Editor de rutas: lista de pasos y paso elegido, en dos columnas a partir de 1280 px. */
.app-routing {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 1280px) {
    .app-routing {
        grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr);
    }
}

/* ---- Fabricación ---- */

/* Ficha con columna lateral (orden, lote): una columna; a partir de 1280px, contenido y datos al lado. */
.app-side-split {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 1280px) {
    .app-side-split {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    }
}

/* Operación en la tablet: pasos a un lado desde 1024px (tablet apaisada); una columna por debajo. */
.app-station-split {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

/* En vertical o en el móvil, primero el trabajo (escaneo, pasos, botones) y después la ruta y el producto. */
.app-station-side {
    order: 1;
}

@media (min-width: 1024px) {
    .app-station-split {
        grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr);
    }

    .app-station-side {
        order: 0;
    }
}

/* ---- Planta en el móvil ---- */

/* Pantallas de una sola tarjeta en la planta (fotografiar hoja): no se estiran en la tablet apaisada. */
.app-station-narrow {
    max-width: 40rem;
}

/* Línea de una recepción en el muelle: cantidad y lote en dos columnas en la tablet, una sola en el móvil. */
.app-station-receipt-line {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* Una característica o un paso de la documentación: sus campos en columnas, con un borde que los agrupa. */
.app-doc-row {
    display: grid;
    gap: 0.75rem 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

/* Parámetros de máquina de la instrucción: dos columnas cuando caben, una en el móvil. */
.app-doc-grid {
    display: grid;
    gap: 0.5rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* Vista de la cámara para escanear: apaisada y con un alto máximo para que quepan los botones. */
.app-camera {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 55vh;
    overflow: hidden;
}

/* Barra de acciones del puesto: en el móvil queda fija abajo, al alcance del pulgar. */
.app-station-actions {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 639px) {
    .app-station-actions {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin: 0 -1rem -1rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--background);
        border-top: 1px solid var(--border);
    }
}

/* Miniaturas de páginas escaneadas: rejilla que se adapta al ancho. */
.app-scan-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.app-scan-thumb {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

/* Celda de lo contado en un recuento: el campo no se estira más de lo necesario. */
.app-count-input {
    display: inline-block;
    width: 9rem;
    max-width: 100%;
    text-align: start;
}

/* Muestras de una característica en una inspección: una casilla por muestra, tantas por fila como quepan. */
.app-sample-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}

/* ---- Páginas públicas (landing y alta) ---- */

/* Ancho de página de la landing, con 16 px de margen en el móvil. */
.app-public-container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Columna del asistente de alta. */
.app-public-narrow {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .app-public-container,
    .app-public-narrow {
        padding-inline: 1.5rem;
    }
}

/* Pasos del alta: el indicador completo desde 768 px; en el móvil, «Paso 2 de 7» con su barra. */
.app-signup-steps {
    display: none;
}

@media (min-width: 768px) {
    .app-signup-steps {
        display: block;
    }

    .app-signup-steps-compact {
        display: none;
    }
}

/* Asientos de un módulo elegido y barra de uso de una licencia: ancho acotado dentro de la fila. */
.app-seat-input {
    width: 100%;
    max-width: 12rem;
    padding-top: 0.5rem;
}

.app-license-meter {
    width: 100%;
    max-width: 16rem;
    padding-top: 0.25rem;
}

/* ---- Mercado ---- */

/* Mapa de Google (BlazorGoogleMaps) de una planta o del radio de una suscripción: alto fijo, ancho de su columna. */
.app-map {
    width: 100%;
    height: 18rem;
    min-width: 0;
}

/* Textos libres (descripciones, mensajes) que respetan los saltos de línea que escribió el usuario. */
.app-pre-line {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Cifras del inicio del Mercado: dos por fila en el móvil, las que quepan en escritorio. */
.app-stat-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}