/* ══════════════════════════════════════════════════════════════════════════
   AVANISOFT TIENDA — Sistema de diseño

   Toma las variables reales del ERP (AvanisoftWeb/wwwroot/app.css) para que la
   app y el sistema se vean como una sola cosa: el verde profundo del menú, los
   acentos teal, el radio de 14px y las sombras con tinte verde.

   Móvil primero: una columna, objetivos táctiles grandes y la navegación al
   alcance del pulgar.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('../fonts/fuentes.css');

:root {
    /* ── Idénticas al ERP ── */
    --marca-profunda: #0b2e2c;   /* --sidebar-bg    */
    --marca-media:    #12403c;   /* --sidebar-hover */
    --marca:          #0f766e;   /* --accent-blue   */
    --marca-clara:    #14b8a6;   /* --accent-cyan   */
    --marca-suave:    #f0fdfa;   /* --sidebar-text-active */
    --verde:          #059669;   /* --accent-green  */
    --naranja:        #d97706;   /* --accent-orange */
    --rojo:           #dc2626;   /* --accent-red    */

    --fondo:      #eef6f4;       /* --content-bg */
    --superficie: #ffffff;
    --borde:      #d7ebe7;
    --borde-sutil:#e6f2f0;

    --tinta:       #134e4a;
    --tinta-suave: #5f8a86;      /* --sidebar-section */

    --radio:    14px;
    --radio-sm: 10px;

    --sombra-sm: 0 1px 2px rgba(11,46,44,.06);
    --sombra-md: 0 8px 24px rgba(11,46,44,.08);
    --sombra-lg: 0 18px 40px rgba(11,46,44,.12);

    --transicion: all .22s cubic-bezier(.4,0,.2,1);

    --fuente-titulo: 'Outfit', 'Segoe UI', sans-serif;
    --fuente-texto:  'IBM Plex Sans', 'Segoe UI', sans-serif;

    --barra-sup: 60px;
    --barra-inf: 64px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--fuente-texto);
    font-size: 14px;
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
    overscroll-behavior-y: none;

    /* Los mismos dos degradados radiales del ERP */
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(20,184,166,.16), transparent 55%),
        radial-gradient(900px 400px at 100% 0%, rgba(15,118,110,.10), transparent 50%),
        var(--fondo);
    background-attachment: fixed;
}

a { color: var(--marca); text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, .titulo { font-family: var(--fuente-titulo); letter-spacing: -.02em; }

/* ── Estructura ─────────────────────────────────────────────────────────── */

.app-shell {
    min-height: 100dvh;
    padding-top: var(--barra-sup);
    padding-bottom: calc(var(--barra-inf) + env(safe-area-inset-bottom, 0px));
}

.contenido { padding: 14px 14px 20px; max-width: 760px; margin: 0 auto; }

/* ── Cabecera: el verde profundo del menú del ERP ───────────────────────── */

.barra-sup {
    position: fixed; top: 0; left: 0; right: 0; height: var(--barra-sup);
    background: linear-gradient(135deg, var(--marca-profunda) 0%, var(--marca) 100%);
    color: #fff; z-index: 100;
    display: flex; align-items: center; gap: 11px; padding: 0 14px;
    box-shadow: 0 4px 20px rgba(11,46,44,.22);
}

.barra-sup .marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

/* Mismo tratamiento que .brand-icon del ERP */
.marca-icono {
    width: 38px; height: 38px; border-radius: var(--radio-sm);
    background: linear-gradient(135deg, var(--marca), var(--marca-clara));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--fuente-titulo); font-weight: 800; font-size: 18px;
    flex: none; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.marca-icono img { width: 100%; height: 100%; object-fit: cover; }

.marca-texto { min-width: 0; }
.marca-texto .nombre {
    font-family: var(--fuente-titulo); font-size: 16px; font-weight: 800;
    color: #f0fdfa; letter-spacing: -.3px; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marca-texto .sub { font-size: 10.5px; color: rgba(240,253,250,.65); font-weight: 500; }

.barra-sup .btn-icono {
    background: rgba(255,255,255,.14); border: none; color: #fff;
    width: 38px; height: 38px; border-radius: var(--radio-sm); font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none; transition: var(--transicion);
}

.barra-sup .btn-icono:active { background: rgba(255,255,255,.3); transform: scale(.94); }

/* ── Barra inferior: blanca con píldora activa ──────────────────────────── */

.barra-inf {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    height: calc(var(--barra-inf) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde);
    display: flex; align-items: stretch;
    box-shadow: 0 -2px 20px rgba(11,46,44,.06);
}

.barra-inf a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; color: var(--tinta-suave);
    font-size: 10px; font-weight: 600; text-decoration: none; position: relative;
    transition: var(--transicion);
}

.barra-inf .ic {
    font-size: 19px; line-height: 1; width: 42px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; transition: var(--transicion);
}

.barra-inf a.activo { color: var(--marca); font-weight: 700; }
.barra-inf a.activo .ic { background: var(--marca-suave); }

.burbuja {
    position: absolute; top: 5px; left: 50%; margin-left: 5px;
    background: var(--naranja); color: #fff; border-radius: 999px;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 10px; font-weight: 800; font-family: var(--fuente-titulo);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(217,119,6,.4);
}

/* ── Buscador ───────────────────────────────────────────────────────────── */

.buscador {
    display: flex; align-items: center; gap: 9px; background: #fff;
    border: 1px solid var(--borde); border-radius: 999px; padding: 4px 5px 4px 15px;
    box-shadow: var(--sombra-sm); transition: var(--transicion);
}

.buscador:focus-within { border-color: var(--marca-clara); box-shadow: 0 0 0 3px rgba(20,184,166,.14); }

.buscador input {
    border: none; outline: none; flex: 1; font-size: 16px; background: transparent;
    color: var(--tinta); font-family: inherit; min-width: 0;
}

.buscador input::placeholder { color: #9dbdb9; }

/* Botón de escanear dentro del buscador */
.btn-escanear {
    width: 38px; height: 38px; border-radius: 50%; border: none; flex: none;
    background: linear-gradient(135deg, var(--marca), var(--marca-clara));
    color: #fff; font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(15,118,110,.3); transition: var(--transicion);
}

.btn-escanear:active { transform: scale(.92); }

/* ── Rejilla y tarjetas ─────────────────────────────────────────────────── */

.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }

@media (min-width: 560px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
    border: 1px solid var(--borde);
    border-radius: var(--radio); overflow: hidden; display: flex;
    flex-direction: column; box-shadow: var(--sombra-sm);
    transition: var(--transicion);
}

.tarjeta:active { transform: translateY(1px); box-shadow: var(--sombra-md); }

/* La foto y el botón viven en el mismo contenedor: por eso el botón
   puede montarse sobre la esquina de la imagen. */
.tarjeta-foto { position: relative; background: #fff; }

.tarjeta-foto img {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    padding: 10px; display: block;
}

.tarjeta-foto .sin-foto {
    width: 100%; aspect-ratio: 1;
    background: linear-gradient(135deg, var(--marca-suave), #e6f7f4);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; opacity: .4;
}

/* ⭐ Botón de agregar montado sobre la foto */
.accion-foto {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
}

.btn-mas {
    width: 42px; height: 42px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--marca), var(--marca-clara));
    color: #fff; font-size: 24px; font-weight: 400; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(15,118,110,.38), 0 0 0 3px rgba(255,255,255,.9);
    transition: var(--transicion);
}

.btn-mas:active { transform: scale(.88); }
.btn-mas:disabled {
    background: #cbd5e1; box-shadow: 0 0 0 3px rgba(255,255,255,.9); cursor: not-allowed;
}

/* Al agregar, el botón se convierte en contador sin mover la rejilla */
.contador-foto {
    display: flex; align-items: center; background: #fff;
    border-radius: 999px; padding: 3px;
    box-shadow: 0 4px 14px rgba(15,118,110,.28), 0 0 0 2px var(--marca);
    animation: aparecer .18s cubic-bezier(.4,0,.2,1);
}

@keyframes aparecer { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.contador-foto button {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: var(--marca-suave); color: var(--marca);
    font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}

.contador-foto button:disabled { color: #cbd5e1; background: #f1f5f9; }
.contador-foto .valor {
    min-width: 26px; text-align: center; font-size: 13px; font-weight: 800;
    font-family: var(--fuente-titulo); color: var(--tinta); padding: 0 2px;
}

.tarjeta .cuerpo { padding: 10px 11px 12px; display: flex; flex-direction: column; flex: 1; gap: 5px; }

.tarjeta .nombre {
    font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--tinta);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 34px;
}

.tarjeta .precio {
    font-family: var(--fuente-titulo); font-size: 18px; font-weight: 800;
    color: var(--marca); letter-spacing: -.4px;
}

.tarjeta .unidad { font-size: 10.5px; color: var(--tinta-suave); font-weight: 500; }

/* ── Etiquetas ──────────────────────────────────────────────────────────── */

.etiqueta {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
    font-family: var(--fuente-titulo);
}

.etiqueta.escaso  { background: #fff7ed; color: #c2410c; }
.etiqueta.agotado { background: #fef2f2; color: #b91c1c; }
.etiqueta.ok      { background: #ecfdf5; color: #047857; }

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn {
    border: none; border-radius: 12px; padding: 12px 18px; font-size: 14px;
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; transition: var(--transicion);
    font-family: var(--fuente-titulo); letter-spacing: -.2px;
    min-height: 46px;   /* 46px: tamaño en que un dedo acierta sin fallar */
}

.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-principal {
    background: linear-gradient(135deg, var(--marca), var(--marca-clara));
    color: #fff; box-shadow: 0 4px 14px rgba(15,118,110,.28);
}

.btn-oscuro {
    background: linear-gradient(135deg, var(--marca-profunda), var(--marca-media));
    color: #fff; box-shadow: 0 4px 14px rgba(11,46,44,.25);
}

.btn-suave   { background: var(--marca-suave); color: var(--marca); }
.btn-borde   { background: #fff; color: var(--tinta); border: 1px solid var(--borde); }
.btn-peligro { background: #fef2f2; color: var(--rojo); }
.btn-bloque  { width: 100%; }

/* ── Contador estándar (carrito, ficha) ─────────────────────────────────── */

.contador {
    display: flex; align-items: center; border: 1.5px solid var(--marca);
    border-radius: 12px; overflow: hidden; background: #fff;
}

.contador button {
    background: var(--marca-suave); border: none; color: var(--marca);
    width: 38px; height: 40px; font-size: 19px; font-weight: 700; cursor: pointer;
}

.contador button:disabled { color: #cbd5e1; }
.contador .valor {
    flex: 1; text-align: center; font-size: 14px; font-weight: 800;
    font-family: var(--fuente-titulo); min-width: 36px;
}

/* ── Superficies ────────────────────────────────────────────────────────── */

.panel {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
    border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 15px; box-shadow: var(--sombra-sm);
}

.seccion-titulo {
    font-family: var(--fuente-titulo); font-size: 16px; font-weight: 800;
    margin: 20px 0 11px; letter-spacing: -.3px;
    display: flex; align-items: center; justify-content: space-between;
}

.seccion-titulo a { font-size: 12px; font-weight: 700; font-family: var(--fuente-texto); }

/* ── Categorías: imagen + nombre COMPLETO ───────────────────────────────── */

/* Rejilla de categorías de la portada: el nombre se ve entero, en dos líneas
   si hace falta. Antes iban en chips de una línea y "Tornillos y fijaciones"
   se cortaba. */
.cat-rejilla {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px;
}

.cat-item {
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 11px 7px 9px; text-align: center; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    transition: var(--transicion); box-shadow: var(--sombra-sm);
}

.cat-item:active { transform: translateY(1px); border-color: var(--marca-clara); }

.cat-item .cat-img {
    width: 46px; height: 46px; border-radius: 12px; object-fit: cover;
    background: var(--marca-suave); flex: none;
}

.cat-item .cat-emoji {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    background: linear-gradient(135deg, var(--marca-suave), #dcf5f1);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}

.cat-item .cat-nombre {
    font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--tinta);
    /* Sin nowrap: el nombre completo se ve, aunque ocupe dos líneas */
    word-break: break-word; hyphens: auto;
}

.cat-item .cat-cuenta { font-size: 9.5px; color: var(--tinta-suave); font-weight: 500; }

/* Chips horizontales (filtro del buscador) */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 3px 0 9px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none; background: #fff; border: 1px solid var(--borde);
    border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 600;
    color: var(--tinta); cursor: pointer; transition: var(--transicion);
    display: flex; align-items: center; gap: 7px; max-width: 210px;
}

.chip img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip.activo {
    background: linear-gradient(135deg, var(--marca), var(--marca-clara));
    color: #fff; border-color: transparent;
    box-shadow: 0 3px 10px rgba(15,118,110,.28);
}

/* ── Filas ──────────────────────────────────────────────────────────────── */

.fila { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde-sutil); }
.fila:last-child { border-bottom: none; }

.fila .mini {
    width: 56px; height: 56px; border-radius: var(--radio-sm); object-fit: contain;
    background: #fff; border: 1px solid var(--borde); flex: none; padding: 4px;
}

.fila .mini-vacia {
    width: 56px; height: 56px; border-radius: var(--radio-sm);
    background: linear-gradient(135deg, var(--marca-suave), #e6f7f4);
    display: flex; align-items: center; justify-content: center;
    font-size: 23px; opacity: .4; flex: none;
}

/* ── Barra de total fija ────────────────────────────────────────────────── */

.barra-total {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--barra-inf) + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.98); backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde);
    padding: 12px 14px; z-index: 90; box-shadow: 0 -6px 22px rgba(11,46,44,.09);
}

/* ── Aviso rápido con deshacer ──────────────────────────────────────────── */

.aviso-rapido {
    position: fixed; left: 14px; right: 14px;
    bottom: calc(var(--barra-inf) + env(safe-area-inset-bottom, 0px) + 12px);
    background: var(--marca-profunda); color: #fff;
    border-radius: 12px; padding: 12px 15px; z-index: 200;
    display: flex; align-items: center; gap: 11px;
    box-shadow: var(--sombra-lg); font-size: 13px; font-weight: 500;
    animation: subir .22s cubic-bezier(.4,0,.2,1);
    max-width: 480px; margin: 0 auto;
}

@keyframes subir { from { transform: translateY(70px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.aviso-rapido .texto { flex: 1; min-width: 0; }
.aviso-rapido button {
    background: rgba(255,255,255,.16); border: none; color: #fff;
    padding: 7px 13px; border-radius: 8px; font-size: 12px; font-weight: 700;
    cursor: pointer; flex: none; font-family: var(--fuente-titulo);
}

.aviso-rapido button:active { background: rgba(255,255,255,.3); }

/* ── Formularios ────────────────────────────────────────────────────────── */

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--tinta); }

.campo input, .campo select, .campo textarea {
    width: 100%; border: 1px solid var(--borde); border-radius: 12px;
    padding: 13px 14px; font-size: 16px;   /* 16px evita el zoom automático en iOS */
    outline: none; background: #fff; font-family: inherit; color: var(--tinta);
    transition: var(--transicion);
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--marca-clara); box-shadow: 0 0 0 3px rgba(20,184,166,.14);
}

.campo .ayuda { font-size: 11px; color: var(--tinta-suave); margin-top: 5px; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.aviso {
    border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 12px;
    display: flex; gap: 10px; align-items: flex-start; line-height: 1.5;
}

.aviso.info   { background: var(--marca-suave); color: #115e59; }
.aviso.error  { background: #fef2f2; color: #991b1b; }
.aviso.exito  { background: #ecfdf5; color: #047857; }
.aviso.alerta { background: #fff7ed; color: #9a3412; }

/* ── Estados vacíos y carga ─────────────────────────────────────────────── */

.vacio { text-align: center; padding: 48px 20px; color: var(--tinta-suave); }
.vacio .emoji { font-size: 54px; opacity: .3; display: block; margin-bottom: 12px; }
.vacio h3 { font-size: 17px; color: var(--tinta); margin: 0 0 7px; font-family: var(--fuente-titulo); }
.vacio p { font-size: 13px; margin: 0 0 18px; }

.cargando { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 48px 0; }

.rueda {
    width: 36px; height: 36px; border: 3px solid var(--borde);
    border-top-color: var(--marca); border-radius: 50%;
    animation: girar .8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.esqueleto {
    background: linear-gradient(90deg, #e6f2f0 25%, #f7fbfa 50%, #e6f2f0 75%);
    background-size: 200% 100%; animation: brillo 1.3s infinite; border-radius: var(--radio-sm);
}

@keyframes brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Escáner ────────────────────────────────────────────────────────────── */

.escaner-fondo {
    position: fixed; inset: 0; background: rgba(11,46,44,.94); z-index: 300;
    display: flex; flex-direction: column;
}

.escaner-cabecera {
    padding: 16px; display: flex; align-items: center; gap: 12px; color: #fff;
}

.escaner-cabecera .titulo { flex: 1; font-size: 16px; font-weight: 800; font-family: var(--fuente-titulo); }

.escaner-cabecera button {
    background: rgba(255,255,255,.16); border: none; color: #fff;
    width: 38px; height: 38px; border-radius: var(--radio-sm);
    font-size: 17px; cursor: pointer;
}

.escaner-video {
    flex: 1; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.escaner-video video { width: 100%; height: 100%; object-fit: cover; }

.escaner-pie { padding: 16px 18px 26px; color: rgba(255,255,255,.85); text-align: center; font-size: 13px; }

.escaner-marcador {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 84%; max-width: 340px; height: 132px;
    border: 2px solid var(--marca-clara); border-radius: 12px;
    box-shadow: 0 0 0 2000px rgba(11,46,44,.45); pointer-events: none;
}

.escaner-marcador::after {
    content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
    background: var(--marca-clara); box-shadow: 0 0 10px var(--marca-clara);
    animation: barrer 1.9s ease-in-out infinite;
}

@keyframes barrer { 0%,100% { top: 12%; } 50% { top: 88%; } }

/* Lista de lo escaneado en la sesión */
.escaner-lista {
    max-height: 130px; overflow-y: auto; padding: 0 16px;
}

.escaner-lista div {
    color: #fff; font-size: 12.5px; padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    display: flex; justify-content: space-between; gap: 10px;
}

/* ── Seguimiento del pedido ─────────────────────────────────────────────── */

.pasos { display: flex; flex-direction: column; }

.paso { display: flex; gap: 13px; align-items: flex-start; }
.paso .marca-paso { display: flex; flex-direction: column; align-items: center; flex: none; }

.paso .punto {
    width: 32px; height: 32px; border-radius: 50%; background: var(--borde);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    transition: var(--transicion);
}

.paso .linea { width: 2px; flex: 1; min-height: 24px; background: var(--borde); }
.paso.hecho .punto { background: linear-gradient(135deg, var(--marca), var(--marca-clara)); color: #fff; }
.paso.hecho .linea { background: var(--marca-clara); }
.paso.actual .punto { box-shadow: 0 0 0 5px rgba(20,184,166,.2); }
.paso .texto { padding-bottom: 17px; }
.paso .texto strong { font-size: 14px; display: block; font-family: var(--fuente-titulo); }
.paso .texto span { font-size: 12px; color: var(--tinta-suave); }

/* ── Arranque de Blazor ─────────────────────────────────────────────────── */

.loading-progress, .loading-progress-text { display: none; }

#blazor-error-ui {
    background: #fef2f2; color: #991b1b; bottom: 0; display: none;
    left: 0; padding: 13px 42px 13px 15px; position: fixed; width: 100%;
    z-index: 1000; font-size: 13px; box-shadow: 0 -3px 14px rgba(0,0,0,.1);
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 15px; top: 13px; }