/* =====================================================================
   Estilos propios de la aplicación: pantalla de arranque de Blazor y
   ajustes de MudBlazor para que sus superficies respeten el design system.
   ===================================================================== */

/* Pantalla mostrada mientras descarga el runtime de WebAssembly */
.boot-screen {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f2f2;
}
.boot-screen__logo {
  width: 56px;
  height: 56px;
  background: #ec3013;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  font-family: 'Archivo', sans-serif;
  animation: boot-pulse 1.2s ease-in-out infinite;
}
@keyframes boot-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

#blazor-error-ui {
  background: #b3261e;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 24px;
  position: fixed;
  z-index: 1000;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  display: none;
}
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: 8px }
#blazor-error-ui .dismiss { cursor: pointer; float: right }

/* El splash se superpone a la aplicación mientras se resuelve la sesión, en
   vez de dibujarse dentro del layout con el menú alrededor. */
.splash--overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
}

/* El diseño solo pinta iconos dentro de estos cuadros, así que su CSS no dice
   nada de <img>. Al meter fotos reales hay que acotarlas: sin esto la imagen se
   pinta a su tamaño natural y estira el contenedor —una tarjeta de catálogo
   terminaba midiendo el doble que su propio pie—. Se recortan para llenar la
   caja sin deformarse. */
.thumb img,
.img-row__thumb img,
.ppick__thumb img,
.thumb-sq img,
.avatar img,
.prod-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La foto grande del detalle rápido se ve entera, sin recortar: ahí el usuario
   está mirando el producto, no reconociéndolo de un vistazo. */
.photo-lg img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Coincidencia de búsqueda dentro de un resultado. El diseño no tiene <mark>, así
   que se pinta con el tinte del color primario para que resalte sin gritar y siga
   leyéndose igual en tema oscuro. */
.hl {
  background: var(--tint-primary);
  color: inherit;
  font-weight: 600;
  padding: 0 1px;
  border-radius: 2px;
}

/* ============ MudBlazor → design system ============ */
/* MudBlazor resetea todo <button> a inline-flex CENTRADO (justify-content:center).
   El design system asume el default del navegador y alinea con sus propias
   clases, así que se neutraliza aquí para que celdas, menús y botones de
   texto queden alineados a la izquierda como en el diseño. */
button {
  justify-content: normal;
}

/* El snackbar de MudBlazor se pinta como el del diseño (bloque oscuro, sin radio) */
.mud-snackbar {
  border-radius: 0 !important;
  background: var(--palette-secondary) !important;
  color: var(--palette-surface) !important;
  box-shadow: var(--elevation-2) !important;
  font-family: 'Archivo', sans-serif !important;
  font-size: 14px !important;
  border: none !important;
}
[data-theme="dark"] .mud-snackbar {
  background: #f3f2f2 !important;
  color: #201e1d !important;
}
.mud-snackbar .mud-snackbar-icon { color: var(--palette-success) !important; margin-right: 12px !important }
.mud-snackbar .mud-snackbar-content-message { padding: 2px 0 }

/* Popovers y tooltips de MudBlazor sin radio, por si se usan */
.mud-popover, .mud-tooltip, .mud-dialog { border-radius: 0 !important }