/* Manrope, tipografía de marca MUREQO (SIL OFL). Self-hosted: el CSP de la app es font-src 'self'.
   Variable 400–800, subconjunto latino (cubre todo el español). Ver brand/README.md. */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body { margin: 0; font-family: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* Pantalla de carga (antes de que arranque Blazor): la Q de la marca en Menta sobre Pino, igual que el
   ícono. El SVG lo mantiene brand/build.mjs (bloque brand:mark de index.html). */
.app-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    height: 100vh; background: #0F5B52; color: #fff; font-size: 1.125rem; font-weight: 600;
}
.app-loading svg { width: auto; height: 58px; fill: #6FE0C3; }

/* Visible keyboard focus everywhere — POS is keyboard-driven (WCAG 2.4.7). Color primario del tema
   activo; en el app bar (fondo Pino) el anillo Pino sería invisible, ahí va Menta. */
:focus-visible { outline: 3px solid var(--mud-palette-primary, #0F5B52); outline-offset: 2px; }
.mud-appbar :focus-visible { outline-color: #6FE0C3; }

#blazor-error-ui {
    background: #b71c1c; color: #fff; bottom: 0; display: none;
    left: 0; padding: 0.75rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }

/* Carrito del POS: tipografía más grande — la lee tanto el cajero como el cliente. */
.pos-cart .mud-table-cell { font-size: 1.15rem; }
.pos-cart .mud-table-row .mud-table-cell { padding-top: 12px; padding-bottom: 12px; }
.pos-cart .mud-table-head .mud-table-cell { font-weight: 600; }
.pos-cart .mud-table-cell strong { font-size: 1.3rem; }
.pos-cart .pos-cart-sku { font-size: .95rem; }
.pos-cart .mud-input input { font-size: 1.25rem; }
.pos-cart .mud-input .mud-input-root { max-width: 110px; }
.pos-cart-totals span { font-size: 1.15rem; }

/* Barra de atajos del POS. z-index 900: por debajo de #blazor-error-ui (1000) y de los diálogos de
   MudBlazor, que deben poder taparla. Usa las variables del tema para seguir el modo oscuro. */
.pos-hints {
    align-items: center; background: var(--mud-palette-surface); bottom: 0;
    border-top: 1px solid var(--mud-palette-lines-default); display: flex; flex-wrap: wrap;
    gap: 0 1.25rem; left: 0; padding: 6px 16px; position: fixed; width: 100%; z-index: 900;
}
.pos-hint { align-items: center; display: inline-flex; gap: 6px; }
.pos-hint-text { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.pos-key {
    background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px; border-radius: 4px; font-family: inherit; font-size: .75rem;
    font-weight: 600; line-height: 1; padding: 3px 6px; white-space: nowrap;
}
/* La barra es fixed: sin este colchón taparía el botón de vaciar carrito al final de la página. */
.pos-hints-spacer { height: 48px; }
/* Sin teclado físico la barra solo roba alto útil; y no tiene sentido en papel. */
@media (max-width: 959.98px) {
    .pos-hints { display: none; }
    .pos-hints-spacer { height: 0; }
}
@media print {
    .pos-hints { display: none; }
    .pos-hints-spacer { height: 0; }
}

/* ── Logo MUREQO (Shared/Components/BrandLogo.razor) ─────────────────────────────────────────
   Escala con font-size: 1em = alto del logotipo (104 u en brand/build.mjs; mayúsculas ≈ 0,96em). La
   cola de la Q (.mureqo-logo-accent) lleva el color de marca y el resto de las letras currentColor.
   La Q sola (.mureqo-logo-mark) aparece solo donde la palabra no entra. El producto va en Manrope
   SemiBold con la altura de mayúscula igualada a la del logotipo (0,96em ÷ 0,72 = 1,335em). */
.mureqo-logo { display: inline-flex; align-items: center; gap: .45em; font-size: 22px; line-height: 1; vertical-align: middle; }
.mureqo-logo svg { display: block; flex: none; fill: currentColor; }
.mureqo-logo-wordmark { height: 1em; width: auto; }
/* Doble clase a propósito: ".mureqo-logo svg" (clase + elemento) le ganaba a una clase sola y la Q
   aparecía siempre. Las reglas que la muestran (--compact, app bar en xs) usan la misma especificidad
   y van después. */
.mureqo-logo .mureqo-logo-mark { display: none; height: 1.15em; width: auto; }
.mureqo-logo-accent { fill: var(--mud-palette-primary); }
.mureqo-logo-product { font-size: 1.335em; font-weight: 600; letter-spacing: .01em; color: var(--mud-palette-primary); }
.mureqo-logo--compact .mureqo-logo-wordmark,
.mureqo-logo--compact .mureqo-logo-product { display: none; }
.mureqo-logo--compact .mureqo-logo-mark { display: block; }

/* App bar: es oscuro en los dos modos (Pino / Tinta) → letras blancas (heredando AppbarText, en oscuro
   quedaban al 70 % y se veían grises), cola de la Q y producto en Menta. En xs el ancho es del menú, la
   conectividad, la insignia de pendientes (+72 px con cola) y el usuario: sin producto, y debajo de
   400 px queda la Q sola. Medido: con insignia, el logo completo desbordaba a 360–400 px. */
.mureqo-logo--appbar { font-size: 20px; margin-left: 4px; color: #FFFFFF; }
.mureqo-logo--appbar .mureqo-logo-accent { fill: #6FE0C3; }
.mureqo-logo--appbar .mureqo-logo-product { color: #6FE0C3; }
/* Por tramos (medido con selector de empresa, switch de tema, insignia de pendientes y nombre de
   usuario visibles): el producto solo desde lg; en sm/xs el logotipo baja a 17 px. */
@media (max-width: 1279.98px) {
    .mureqo-logo--appbar .mureqo-logo-product { display: none; }
}
@media (max-width: 959.98px) {
    .mureqo-logo--appbar { font-size: 17px; }
}
/* 600–767 px es el tramo más apretado: desde sm se muestran el selector de empresa y el nombre de
   usuario, y con el logotipo el chip de empresa se partía en dos líneas. Ahí va la Q sola. */
@media (min-width: 600px) and (max-width: 767.98px) {
    .mureqo-logo--appbar .mureqo-logo-wordmark { display: none; }
    .mureqo-logo--appbar .mureqo-logo-mark { display: block; }
}
@media (max-width: 399.98px) {
    .mureqo-logo--appbar .mureqo-logo-wordmark { display: none; }
    .mureqo-logo--appbar .mureqo-logo-mark { display: block; }
}

/* Login: el logo es el h1. Letras en SecondaryContrastText (Tinta en claro, blanco en oscuro — ver
   BrandTheme); cola de la Q y producto en primario (Pino / Menta). */
.mureqo-login-title { margin-top: 0; line-height: 1; font-size: inherit; font-weight: inherit; }
/* El logo con producto mide ~9,7 em; en mobile la tarjeta deja el ancho de pantalla menos 96 px
   (container 16 + pa-8 32, por lado): fluido hasta 30 px para que "POS" no se corte. */
.mureqo-logo--login { font-size: clamp(18px, calc((100vw - 104px) / 9.7), 30px); color: var(--mud-palette-secondary-text, var(--mud-palette-text-primary)); }

/* Switch de tema de las pantallas sin shell (EmptyLayout: login): arriba a la derecha, fijo, por
   encima de la tarjeta centrada. */
.mureqo-auth-theme-toggle { position: fixed; top: 12px; right: 12px; z-index: 10; }