/*
  Paleta de marca Hardnet / Hardex IA, tomada del logo (Logo.jpeg): la "H" en
  degradado turquesa-cian, texto en negro, fondo blanco. Ver memoria del
  proyecto "hardex-identidad-visual" para el detalle de esta decisión.
*/
:root {
    --hx-teal-900: #0B3A44;
    --hx-teal-800: #0F4C5C;
    --hx-teal-700: #146B7D;
    --hx-teal-600: #1C8CA3;
    --hx-teal-500: #2AA8BF;
    --hx-teal-400: #5FC7D6;
    --hx-teal-300: #8FDCE6;
    --hx-teal-100: #E4F7FA;

    --hx-ink: #17181A;
    --hx-ink-soft: #4A5257;
    --hx-bg: #FFFFFF;
    --hx-bg-soft: #F5FBFC;
    --hx-border: #DCEBEE;

    --hx-success: #1E8E5A;
    --hx-warning: #B5730A;
    --hx-danger: #C0392B;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--hx-ink);
}

a, .btn-link {
    color: var(--hx-teal-700);
}

/* Botones grandes y de alto contraste — más fáciles de acertar y leer
   para alguien con poca experiencia en pantallas táctiles (ver memoria
   del proyecto "hardex-ux-simplicidad"). */
.btn-primary {
    color: #fff;
    background-color: var(--hx-teal-600);
    border-color: var(--hx-teal-700);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--hx-teal-700);
    border-color: var(--hx-teal-800);
}

.btn, .form-control, .form-select {
    font-size: 1rem;
    padding: 0.55rem 0.9rem;
}

.btn-lg {
    font-size: 1.15rem;
    padding: 0.75rem 1.25rem;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--hx-teal-400);
    border-color: var(--hx-teal-500);
}

.content {
    padding-top: 1.1rem;
}

h1, h2, h3 {
    color: var(--hx-teal-900);
}

/* Título de sección dentro de una tarjeta (".hx-card > h2", el <h2 class="h5"> que encabeza
   casi todas las tarjetas de todos los formularios: "¿A quién le compras?", "Productos
   comprados", etc.) — antes era solo texto en un tono más oscuro, se leía como un párrafo más,
   no como un título. El margen negativo lo hace ocupar todo el ancho de la tarjeta como una
   barra de color, usando el mismo padding de .hx-card (1.25rem/1.5rem) para que encaje justo. */
.hx-card > h2 {
    background: var(--hx-teal-600);
    color: #fff;
    margin: -1.25rem -1.5rem 1.25rem;
    padding: 0.65rem 1.5rem;
    border-radius: 12px 12px 0 0;
    font-size: 1.05rem;
}

.hx-marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hx-marca img {
    height: 34px;
    width: auto;
    display: block;
    background: white;
    border-radius: 6px;
    padding: 2px;
}

.hx-marca span {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.hx-tabla-wrap {
    overflow-x: auto;
}

/* En pantallas angostas (celular) la tabla casi siempre es más ancha que la pantalla y hay
   que deslizar el dedo hacia los lados para ver el resto (Fecha, Total, Estado, los botones
   de acción) — sin ningún aviso, esas columnas simplemente "no se ven". Este aviso se queda
   pegado al borde izquierdo mientras se desliza (position: sticky), así sigue visible hasta
   que ya no hace falta. */
@media (max-width: 640px) {
    .hx-tabla-wrap::before {
        content: "\21c4  Desliza hacia los lados para ver más";
        position: sticky;
        left: 0;
        display: inline-block;
        font-size: 0.72rem;
        color: var(--hx-teal-700);
        background: var(--hx-teal-100);
        padding: 0.2rem 0.6rem;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        white-space: nowrap;
    }
}

.hx-tabla-simple {
    width: 100%;
    border-collapse: collapse;
}

.hx-tabla-simple th {
    text-align: left;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hx-ink-soft);
    background: var(--hx-teal-100);
    border-bottom: 2px solid var(--hx-border);
    padding: 0.6rem 0.75rem;
}

/* Pie de un listado paginado (ver Compras.razor) — mismo tinte que el encabezado de la tabla,
   así arriba y abajo contrastan un poco contra la tarjeta blanca en vez de perderse en ella. */
.hx-tabla-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--hx-teal-100);
    border: 1px solid var(--hx-border);
    border-radius: 8px;
}

/* Panel de totales de CompraFormulario: se queda visible mientras se hace scroll por una
   compra con muchas líneas, en vez de perderse al fondo de la tarjeta de productos. */
.hx-totales-panel {
    position: sticky;
    top: 1rem;
}

.hx-tabla-simple td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--hx-border);
    vertical-align: middle;
}

.hx-tabla-simple tbody tr:hover {
    background: var(--hx-bg-soft);
}

/* Filas de listados con existencia: sin existencia se distingue en rojo claro (hay que
   reponer), desactivado en gris claro (no se vende) — para verlo de un vistazo sin tener que
   leer la columna Existencia/Estado de cada fila una por una. */
.hx-fila-sin-existencia {
    background: #FBE9E7;
}

.hx-fila-sin-existencia:hover {
    background: #F7DAD6;
}

.hx-fila-inactiva {
    background: #F0F0F0;
}

.hx-fila-inactiva:hover {
    background: #E6E6E6;
}

.hx-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.hx-badge-activo { background: #E3F5EC; color: var(--hx-success); }
.hx-badge-inactivo { background: #F2F2F2; color: var(--hx-ink-soft); }
.hx-badge-alerta { background: #FCEFDC; color: var(--hx-warning); }
.hx-badge-credito { background: #E4ECFB; color: #2F55A4; }

.hx-card {
    background: var(--hx-bg);
    border: 1px solid var(--hx-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(11, 58, 68, 0.06);
}

.hx-presentacion-adicional {
    padding: 0.6rem;
    background: var(--hx-bg-soft);
    border: 1px solid var(--hx-border);
    border-radius: 8px;
}

/* Líneas de "Productos comprados" en Nueva/Editar compra: antes cada línea era una tarjeta
   aparte (fondo, borde, una etiqueta encima de cada campo) — ocupaba mucho espacio vertical y
   se veía "grueso" apenas la compra tenía varios productos (pedido explícito del usuario: que
   se vea como una tabla, igual que los listados de Productos/Compras/etc.). Ahora es una fila
   más de .hx-tabla-simple — sin etiquetas repetidas, los encabezados van una sola vez arriba —
   con anchos angostos para las columnas numéricas para no desperdiciar espacio horizontal.
   El buscador de producto sigue necesitando position:relative (hx-autocomplete-wrap) para que
   su panel de sugerencias flote correctamente encima de la fila de abajo. */
.hx-tabla-compra-lineas td {
    vertical-align: top;
    padding: 0.4rem;
}

.hx-tabla-compra-lineas .hx-col-cantidad,
.hx-tabla-compra-lineas .hx-col-descuento {
    width: 90px;
}

.hx-tabla-compra-lineas .hx-col-costo {
    width: 150px;
}

.hx-tabla-compra-lineas .hx-col-costo input {
    min-width: 60px;
}

.hx-tabla-compra-lineas td.hx-autocomplete-wrap {
    min-width: 180px;
}

/* En pantallas angostas esta tabla en particular no lleva el aviso de "desliza para ver más"
   de .hx-tabla-wrap (ver el comentario en CompraFormulario.razor sobre por qué no se envuelve
   en ese contenedor) — se deja que se comprima con el ancho disponible en vez de desbordar. */
@media (max-width: 640px) {
    .hx-tabla-compra-lineas .hx-col-cantidad,
    .hx-tabla-compra-lineas .hx-col-descuento {
        width: 60px;
    }

    .hx-tabla-compra-lineas .hx-col-costo {
        width: 100px;
    }

    .hx-tabla-compra-lineas td.hx-autocomplete-wrap {
        min-width: 120px;
    }
}

.hx-autocomplete-wrap {
    position: relative;
}

.hx-autocomplete-panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--hx-bg);
    border: 1px solid var(--hx-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(11, 58, 68, 0.12);
    max-height: 220px;
    overflow-y: auto;
}

.hx-autocomplete-opcion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.85rem;
    cursor: pointer;
}

.hx-autocomplete-opcion:hover, .hx-autocomplete-opcion:focus {
    background: var(--hx-bg-soft);
}

.hx-autocomplete-opcion.hx-autocomplete-activa {
    background: var(--hx-teal-100);
}

.hx-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hx-radio-option {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--hx-border);
    border-radius: 8px;
    cursor: pointer;
}

.hx-radio-option:has(input:checked) {
    border-color: var(--hx-accent);
    background: var(--hx-bg-soft);
}

.hx-radio-option input[type="radio"] {
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.hx-inline-add {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: var(--hx-bg-soft);
    border: 1px solid var(--hx-border);
    border-radius: 8px;
}

.hx-inline-add input {
    flex: 1;
}

/* Control compacto de dos opciones excluyentes (ej. Contado/Crédito) — reemplaza el patrón
   .hx-radio-option cuando las opciones no necesitan una descripción larga cada una y el espacio
   vertical importa; ese patrón sigue siendo el correcto para opciones que sí la necesitan (ej.
   método de costeo en ProductoFormulario). Pedido en vivo: "la opcion de credito y contado
   ocupa mucho espacio... se ve congestionado". */
.hx-segmented {
    display: inline-flex;
    border: 1px solid var(--hx-border);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

.hx-segmented-opcion {
    flex: 1;
    border: none;
    background: var(--hx-bg);
    color: var(--hx-ink);
    padding: 0.55rem 0.75rem;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
}

.hx-segmented-opcion + .hx-segmented-opcion {
    border-left: 1px solid var(--hx-border);
}

.hx-segmented-opcion.activo {
    background: var(--hx-teal-600);
    color: #fff;
}

.hx-quick-add-proveedor, .hx-quick-add-cliente {
    margin-top: 0.5rem;
    padding: 0.9rem 1rem;
    background: var(--hx-bg-soft);
    border: 1px solid var(--hx-border);
    border-radius: 8px;
}

.hx-inline-add-titulo {
    font-weight: 600;
    color: var(--hx-teal-900);
    margin-bottom: 0.5rem;
}

.hx-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 58, 68, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.hx-modal-card {
    background: var(--hx-bg);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(11, 58, 68, 0.25);
}

.hx-modal-card-ancho {
    max-width: 480px;
}

.hx-modal-lista-productos {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--hx-border);
    border-radius: 8px;
}

.hx-modal-producto-opcion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--hx-border);
    background: transparent;
}

.hx-modal-producto-opcion:last-child {
    border-bottom: none;
}

.hx-modal-producto-opcion:hover, .hx-modal-producto-opcion.activo {
    background: var(--hx-teal-100);
}

.hx-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.hx-buscador {
    flex: 1;
    max-width: 420px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Barra de botones Guardar/Cancelar (y su confirmación) "pegada" abajo de la
   pantalla en vez de quedar como el último elemento del formulario — en un
   formulario largo el usuario tenía que hacer scroll para encontrar el botón
   justo cuando más lo necesitaba (p. ej. al aparecer "¿Confirmas guardar?"),
   lo cual se prestaba a confusión (reportado en vivo). Al ser sticky y no
   fixed, no le quita espacio al contenido ni tapa nada — simplemente se
   queda pegada abajo del viewport una vez que se llega a ella. */
/* Franja con usuario/empresa/sucursal actuales, arriba de cada pantalla — para que siempre
   se sepa "quién soy, en qué empresa y en qué sucursal estoy trabajando ahora mismo" sin
   tener que adivinarlo. Ver BarraEstadoUsuario.razor. */
.hx-barra-usuario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    padding: 0.5rem 1.5rem;
    background: var(--hx-teal-100);
    border-bottom: 1px solid var(--hx-border);
    font-size: 0.9rem;
}

.hx-barra-item {
    display: flex;
    align-items: center;
    margin: 0;
}

.hx-barra-cambiar {
    font-size: 0.85rem;
}

.hx-barra-acciones {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--hx-bg);
    padding: 0.85rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--hx-border);
    box-shadow: 0 -4px 10px rgba(11, 58, 68, 0.06);
}

/* ---------------------------------------------------------------------------------------
   Computadoras (Fase D, /caja/computadoras). Pedido del usuario: "lo más estético posible",
   y el nombre elegido de una lista, no escrito. Tarjetas grandes para el modo (tiene caja /
   solo vende), nombres como botones-píldora seleccionables, y cada computadora registrada
   como su propia tarjeta con su estado de caja a la vista.
   --------------------------------------------------------------------------------------- */
.hx-pc-paso {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--hx-teal-900);
    margin-bottom: 0.75rem;
}

.hx-pc-paso-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--hx-teal-600);
    color: #fff;
    font-size: 0.9rem;
}

.hx-pc-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.hx-pc-opcion {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    text-align: left;
    padding: 1.25rem;
    background: var(--hx-bg);
    border: 2px solid var(--hx-border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.hx-pc-opcion:hover {
    border-color: var(--hx-teal-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(11, 58, 68, 0.08);
}

.hx-pc-opcion.activo {
    border-color: var(--hx-teal-600);
    background: var(--hx-bg-soft);
    box-shadow: 0 0 0 4px var(--hx-teal-100);
}

.hx-pc-opcion-check {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--hx-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.95rem;
}

.hx-pc-opcion.activo .hx-pc-opcion-check {
    background: var(--hx-teal-600);
    border-color: var(--hx-teal-600);
    color: #fff;
}

.hx-pc-opcion-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hx-ink);
    margin-top: 0.25rem;
}

.hx-pc-opcion-texto {
    font-size: 0.9rem;
    color: var(--hx-ink-soft);
    line-height: 1.35;
}

.hx-pc-icono {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--hx-teal-500), var(--hx-teal-700));
    color: #fff;
    font-size: 1.4rem;
}

.hx-pc-icono-gris {
    background: linear-gradient(135deg, #8A969C, #5C686E);
}

.hx-pc-nombres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.hx-pc-nombre {
    padding: 0.6rem 1.15rem;
    border: 2px solid var(--hx-border);
    border-radius: 999px;
    background: var(--hx-bg);
    color: var(--hx-ink);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.hx-pc-nombre:hover {
    border-color: var(--hx-teal-400);
}

.hx-pc-nombre.activo {
    background: var(--hx-teal-600);
    border-color: var(--hx-teal-600);
    color: #fff;
}

.hx-pc-nombre-chico {
    padding: 0.35rem 0.85rem;
    font-size: 0.88rem;
}

.hx-pc-esta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: linear-gradient(120deg, var(--hx-bg) 55%, var(--hx-teal-100));
}

.hx-pc-esta .hx-pc-icono {
    width: 4rem;
    height: 4rem;
    font-size: 1.9rem;
    border-radius: 16px;
}

.hx-pc-nombre-grande {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hx-teal-900);
    line-height: 1.2;
}

.hx-pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.hx-pc-tarjeta {
    position: relative;
    padding: 1.25rem;
    background: var(--hx-bg);
    border: 1px solid var(--hx-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(11, 58, 68, 0.06);
}

.hx-pc-tarjeta-esta {
    border: 2px solid var(--hx-teal-500);
}

.hx-pc-cinta {
    position: absolute;
    top: -0.7rem;
    right: 1rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: var(--hx-teal-600);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.hx-pc-tarjeta-nombre {
    font-size: 1.15rem;
    font-weight: 700;
}

.hx-pc-estado {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.hx-pc-estado-abierta {
    background: #E3F5EC;
    color: var(--hx-success);
}

.hx-pc-estado-neutro {
    background: #F2F4F5;
    color: var(--hx-ink-soft);
}

.hx-pc-punto {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--hx-success);
    margin-right: 0.45rem;
    box-shadow: 0 0 0 3px rgba(30, 142, 90, 0.2);
}

/* ---------------------------------------------------------------------------------------
   Fase C — precios especiales y pedidos.
   --------------------------------------------------------------------------------------- */
.hx-precio-especial {
    display: inline-flex;
    align-items: center;
    margin-top: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #FFF5D6;
    color: #8A6100;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.hx-precio-especial-aviso {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: #FFF5D6;
    color: #8A6100;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Línea de avance del pedido: Apartado → Listo para entregar → Entregado. */
.hx-pedido-pasos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    background: var(--hx-bg);
    border: 1px solid var(--hx-border);
    border-radius: 12px;
    overflow-x: auto;
}

.hx-pedido-paso {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hx-ink-soft);
    font-weight: 600;
    white-space: nowrap;
}

.hx-pedido-paso i {
    font-size: 1.2rem;
}

.hx-pedido-paso.hecho {
    color: var(--hx-teal-700);
}

.hx-pedido-linea {
    flex: 1;
    min-width: 1.5rem;
    height: 3px;
    border-radius: 2px;
    background: var(--hx-border);
}

.hx-pedido-linea.hecho {
    background: var(--hx-teal-500);
}

/* ---------------------------------------------------------------------------------------
   Secciones desplegables (Mi caja / detalle del turno: ventas cobradas) y filas que se
   expanden para mostrar su detalle.
   --------------------------------------------------------------------------------------- */
.hx-desplegable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: var(--hx-teal-900);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.hx-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.75rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: var(--hx-teal-600);
    color: #fff;
    font-size: 0.9rem;
}

.hx-fila-desplegable {
    cursor: pointer;
}

.hx-fila-detalle > td {
    background: var(--hx-bg-soft);
}

.hx-tabla-anidada {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.hx-confirmacion {
    padding: 0.9rem 1rem;
    border: 1px solid var(--hx-teal-300);
    border-radius: 10px;
    background: var(--hx-teal-100);
}

/* Existencias como tabla pivote: un grupo de columnas (Física/Reservada/Disponible) por
   sucursal; la sucursal donde se está trabajando va resaltada. */
.hx-tabla-pivote th,
.hx-tabla-pivote td {
    white-space: nowrap;
}

.hx-tabla-pivote .hx-pivote-grupo {
    text-align: center;
    border-bottom: 2px solid var(--hx-teal-300);
}

.hx-tabla-pivote .hx-pivote-inicio {
    border-left: 2px solid var(--hx-border);
}

.hx-tabla-pivote .hx-pivote-actual {
    background: var(--hx-teal-100);
}

.hx-tabla-pivote th.hx-pivote-actual {
    background: var(--hx-teal-300);
}

/* ---------------------------------------------------------------------------------------
   Niveles de precio (público / mayorista / ...).
   --------------------------------------------------------------------------------------- */
.hx-segmented-auto {
    width: auto;
}

.hx-segmented-auto .hx-segmented-opcion {
    flex: 0 0 auto;
    padding: 0.4rem 1rem;
}

.hx-nivel-venta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.hx-nivel-venta-titulo {
    font-weight: 600;
    color: var(--hx-teal-900);
}

/* Selector de nivel de una sola línea: compacto, debajo del precio. Resaltado cuando esa línea
   va a un nivel distinto al del resto de la venta. */
.hx-nivel-linea {
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--hx-border);
    border-radius: 999px;
    background: var(--hx-bg);
    color: var(--hx-ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.hx-nivel-linea.distinto {
    border-color: var(--hx-teal-600);
    background: var(--hx-teal-100);
    color: var(--hx-teal-800);
}

/* Tabla de precios de la ficha de producto: una columna por nivel. */
.hx-tabla-precios td,
.hx-tabla-precios th {
    min-width: 150px;
}

.hx-tabla-precios .hx-precio-predeterminado {
    background: var(--hx-teal-100);
}

/* Buscador de productos de venta/pedido: nombre, existencia disponible y precio público en
   columnas (pedido del usuario). */
.hx-modal-card-productos {
    max-width: 620px;
}

.hx-modal-producto-encabezado,
.hx-modal-producto-fila {
    display: grid;
    grid-template-columns: 1fr 90px 110px;
    gap: 0.5rem;
    align-items: center;
}

.hx-modal-producto-encabezado {
    padding: 0.4rem 0.75rem;
    background: var(--hx-teal-100);
    color: var(--hx-teal-900);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}

/* ---------------------------------------------------------------------------------------
   Comprobantes impresos (Components/Compartidos/Comprobante.razor). En pantalla se ven como
   una hoja sobre fondo gris (la vista previa); al imprimir solo sale la hoja.
   --------------------------------------------------------------------------------------- */
.hx-impresion-pagina {
    min-height: 100vh;
    padding: 16px;
    background: #E9EFF0;
}

.hx-comprobante-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto 16px;
}

.hx-comprobante {
    margin: 0 auto;
    background: #fff;
    color: #000;
    box-shadow: 0 2px 10px rgba(11, 58, 68, 0.12);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.hx-formato-carta {
    max-width: 816px;
    padding: 36px 44px;
    font-size: 14px;
}

.hx-formato-ticket {
    width: 74mm;
    max-width: 100%;
    padding: 4mm 3mm;
    font-size: 12px;
    line-height: 1.35;
}

.hx-comp-encabezado {
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed #000;
}

.hx-formato-carta .hx-comp-encabezado {
    text-align: left;
    border-bottom: 2px solid #000;
}

.hx-comp-empresa {
    font-size: 1.25em;
    font-weight: 700;
}

.hx-comp-titulo {
    margin: 10px 0 8px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
}

.hx-comp-numero {
    font-size: 1.05em;
}

.hx-comp-fecha {
    font-weight: 400;
    font-size: 0.9em;
}

.hx-comp-anulado {
    margin: 6px 0;
    padding: 4px;
    border: 2px solid #000;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.hx-comp-datos {
    margin: 8px 0;
}

.hx-comp-datos div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.hx-comp-datos span:first-child {
    color: #333;
}

.hx-comp-seccion {
    margin: 10px 0 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85em;
    border-bottom: 1px dashed #000;
}

.hx-formato-carta .hx-comp-seccion {
    border-bottom: 1px solid #000;
}

/* Líneas: en carta, una tabla; en ticket, nombre en una línea y "cant x precio ... total" en la siguiente. */
.hx-comp-tabla {
    width: 100%;
    border-collapse: collapse;
}

.hx-comp-tabla th {
    text-align: left;
    border-bottom: 1px solid #000;
    padding: 4px 6px;
    font-size: 0.85em;
}

.hx-comp-tabla td {
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

.hx-comp-linea {
    padding: 3px 0;
    border-bottom: 1px dotted #999;
}

.hx-comp-linea-detalle {
    display: flex;
    justify-content: space-between;
}

.hx-comp-totales {
    margin-top: 8px;
}

.hx-comp-totales div {
    display: flex;
    justify-content: space-between;
}

.hx-comp-total-grande {
    font-size: 1.25em;
    font-weight: 800;
    border-top: 1px solid #000;
    margin-top: 4px;
    padding-top: 4px;
}

.hx-formato-carta .hx-comp-totales {
    margin-left: auto;
    width: 320px;
}

.hx-comp-pie {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px dashed #000;
    text-align: center;
    font-size: 0.85em;
}

.hx-comp-leyenda {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.hx-comp-impreso {
    color: #444;
}

.hx-comp-firma {
    display: flex;
    gap: 40px;
    margin-top: 48px;
}

.hx-comp-firma div {
    flex: 1;
    border-top: 1px solid #000;
    padding-top: 4px;
    text-align: center;
    font-size: 0.85em;
}

@media print {
    .hx-no-imprimir {
        display: none !important;
    }

    .hx-impresion-pagina {
        padding: 0;
        background: none;
        min-height: 0;
    }

    .hx-comprobante {
        box-shadow: none;
        margin: 0;
    }

    .hx-formato-carta {
        padding: 0;
        max-width: none;
    }

    .hx-formato-ticket {
        padding: 0;
    }
}

/* ===== Reportes ===== */

/* Atajos de período (Hoy, Ayer, Esta semana...): un toque en vez de escoger dos fechas. */
.hx-periodos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hx-periodo {
    border: 1px solid var(--hx-border);
    background: var(--hx-bg);
    color: var(--hx-ink);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.hx-periodo:hover {
    border-color: var(--hx-teal-400);
}

.hx-periodo.activo {
    background: var(--hx-teal-600);
    border-color: var(--hx-teal-600);
    color: #fff;
}

/* Cifras principales de un reporte, en mosaico: la más importante ocupa doble ancho. */
.hx-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
}

.hx-kpi {
    background: var(--hx-bg);
    border: 1px solid var(--hx-border);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hx-kpi span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hx-ink-soft);
}

.hx-kpi strong {
    font-size: 1.35rem;
    color: var(--hx-teal-800);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.hx-kpi small {
    color: var(--hx-ink-soft);
}

.hx-kpi-principal {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--hx-teal-700), var(--hx-teal-500));
    border-color: transparent;
}

.hx-kpi-principal span,
.hx-kpi-principal small,
.hx-kpi-principal strong {
    color: #fff;
}

.hx-kpi-principal strong {
    font-size: 1.8rem;
}

.hx-kpi-alerta {
    border-color: var(--hx-warning);
    background: #FFF8EC;
}

.hx-kpi-alerta strong {
    color: var(--hx-warning);
}

@media (max-width: 420px) {
    .hx-kpi-principal {
        grid-column: auto;
    }
}

/* ===== Listados largos: encabezados fijos y navegación con flechas =====
   Con miles de registros reales, al bajar se perdían los nombres de las columnas. La tabla del
   listado (data-hx-lista) se estira completa (una sola barra de desplazamiento, la de la página
   — pedido de Carlos: con una zona propia había que hacer doble scroll) y su encabezado se queda
   pegado arriba de la pantalla. En celular la tabla sigue deslizándose hacia los lados (más
   ancha que la pantalla), y ahí el encabezado no puede quedarse fijo. */
@media (min-width: 768px) {
    .hx-tabla-wrap:has(> [data-hx-lista]) {
        overflow: visible;
    }
}

[data-hx-lista] thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

[data-hx-lista] thead th {
    background: var(--hx-teal-100);
}

[data-hx-lista] thead th.hx-pivote-actual {
    background: var(--hx-teal-300);
}

/* Fila elegida con las flechas (↑/↓ desde el buscador). */
[data-hx-lista] tbody tr:focus {
    outline: 2px solid var(--hx-teal-500);
    outline-offset: -2px;
    background: var(--hx-teal-100);
}

[data-hx-lista] tbody tr:focus > td {
    background: var(--hx-teal-100);
}

/* ===== Barra de acciones (BarraAcciones.razor) =====
   Arriba de toda pantalla de detalle/formulario y fija al bajar: Volver a la izquierda,
   acciones a la derecha. */
.hx-barra-superior {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin: -0.5rem 0 1rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    border: 1px solid var(--hx-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(11, 58, 68, 0.08);
}

.hx-barra-superior-titulo {
    font-weight: 700;
    color: var(--hx-teal-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hx-barra-superior-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

@media (max-width: 640px) {
    .hx-barra-superior-titulo {
        display: none;
    }
}

/* Existencias: mercadería que viene en un traslado sin recibir (debajo de "Física"). */
.hx-en-camino {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hx-teal-700);
    white-space: nowrap;
    text-decoration: none;
}

a.hx-en-camino:hover {
    text-decoration: underline;
}

/* ===== Listados impresos (ImpresionListado.razor) ===== */
.hx-solo-imprimir {
    display: none;
}

.hx-listado-impreso .hx-comp-tabla {
    font-size: 11px;
}

.hx-listado-impreso .hx-comp-tabla tr {
    page-break-inside: avoid;
}

@media print {
    body.hx-imprimiendo-listado .sidebar,
    body.hx-imprimiendo-listado .hx-barra-usuario,
    body.hx-imprimiendo-listado article.content > :not(.hx-solo-imprimir) {
        display: none !important;
    }

    body.hx-imprimiendo-listado .hx-solo-imprimir {
        display: block !important;
    }

    body.hx-imprimiendo-listado article.content {
        padding: 0 !important;
    }

    body.hx-imprimiendo-listado .hx-listado-impreso {
        box-shadow: none;
        padding: 0;
        max-width: none;
    }
}

/* ===== Filtros plegables (FiltrosPlegables.razor): en celular, detrás de un botón ===== */
.hx-filtros-boton {
    display: none;
}

@media (max-width: 767.98px) {
    .hx-filtros {
        padding: 0.6rem 0.9rem;
    }

    .hx-filtros-boton {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        border: none;
        background: none;
        padding: 0.25rem 0;
        font-weight: 600;
        color: var(--hx-teal-800);
    }

    /* Plegado: se esconde todo menos el buscador (pedido de Carlos: buscar debe ser rápido
       en el celular, sin tener que abrir los filtros). */
    .hx-filtros-cuerpo:not(.abierto):not(:has(.hx-filtro-fijo)) {
        display: none;
    }

    .hx-filtros-cuerpo:not(.abierto) .row > :not(.hx-filtro-fijo) {
        display: none;
    }

    .hx-filtros-cuerpo:not(.abierto):has(.hx-filtro-fijo) {
        margin-top: 0.6rem;
    }

    .hx-filtros-cuerpo.abierto {
        margin-top: 0.75rem;
    }
}

/* Venta al crédito: cómo va el cliente (límite, lo que debe, lo que le queda). */
.hx-credito-estado {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    background: #E4ECFB;
    font-size: 0.85rem;
}

.hx-credito-estado > div {
    display: flex;
    flex-direction: column;
}

.hx-credito-estado span {
    color: var(--hx-text-muted, #6c757d);
    font-size: 0.75rem;
}

.hx-credito-estado-alerta {
    background: #FDECEC;
}

/* Venta: el precio es una etiqueta (no se escribe) y el producto tiene casi todo el ancho para
   que se lea la descripción completa (pedido de Carlos). */
.hx-tabla-venta-lineas td.hx-autocomplete-wrap {
    min-width: 320px;
    width: 55%;
}

.hx-tabla-venta-lineas .hx-col-precio {
    width: 130px;
    white-space: nowrap;
}

.hx-precio-etiqueta {
    padding-top: 0.45rem;
}

@media (max-width: 767.98px) {
    .hx-tabla-venta-lineas td.hx-autocomplete-wrap {
        min-width: 200px;
    }
}

/* Cantidades y montos siempre a la derecha (pedido de Carlos), también al escribirlos. */
input[inputmode="decimal"],
input[inputmode="numeric"] {
    text-align: right;
}

/* Kardex: la fila de existencia al iniciar el período. */
.hx-kardex-saldo td {
    background: var(--hx-bg-soft, #F1F7F8);
}

/* Mi empresa: interruptor de factura electrónica. */
.hx-fel-interruptor {
    padding: 0.75rem 1rem;
    border: 1px solid var(--hx-border);
    border-radius: 0.5rem;
    background: #F7F9FA;
}

.hx-fel-interruptor.activo {
    border-color: #9FD9C8;
    background: #EAF7F2;
}

/* Factura electrónica: bloque del DTE en el comprobante y JSON de envíos. */
.hx-comp-fel {
    margin-top: 0.4rem;
    font-size: 0.85em;
    text-align: center;
}

.hx-comp-autorizacion {
    font-family: monospace;
    font-weight: 700;
    word-break: break-all;
}

.hx-fel-json {
    max-height: 260px;
    overflow: auto;
    font-size: 0.75rem;
    background: #F7F9FA;
    border: 1px solid var(--hx-border);
    border-radius: 0.4rem;
    padding: 0.5rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ===== Análisis: gráficas (SVG / HTML, sin librerías) ===== */
.hx-grafica-svg {
    width: 100%;
    height: auto;
    display: block;
}

.hx-grafica-guia {
    stroke: #E3E8EC;
    stroke-width: 1;
}

.hx-grafica-eje {
    font-size: 11px;
    fill: #6C757D;
}

.hx-grafica-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.hx-grafica-muestra {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.2rem;
    margin-right: 0.35rem;
    vertical-align: -0.1rem;
}

.hx-grafica-muestra.punteada {
    background: transparent !important;
    border: 2px dashed;
}

.hx-barras {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hx-barra-fila {
    display: grid;
    grid-template-columns: minmax(90px, 32%) 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.hx-barra-etiqueta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hx-barra-pista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hx-barra {
    height: 0.8rem;
    border-radius: 0.2rem;
    min-width: 2px;
}

.hx-barra-comparacion {
    height: 0.4rem;
    background: #9AA5B1;
}

.hx-barra-valor {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

.hx-barra-nota {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    color: #6C757D;
}

.hx-dona {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hx-dona-svg {
    width: 130px;
    height: 130px;
}

.hx-dona-leyenda {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.hx-dona-leyenda strong {
    margin: 0 0.4rem;
}

.hx-mapa-calor {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.7rem;
    width: 100%;
}

.hx-mapa-calor th {
    font-weight: 600;
    color: #6C757D;
    text-align: center;
    padding: 0.15rem;
    white-space: nowrap;
}

.hx-mapa-calor td {
    text-align: center;
    padding: 0.35rem 0.15rem;
    border-radius: 0.2rem;
    min-width: 2.2rem;
}

.hx-analisis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.hx-analisis-grid > .hx-card {
    margin-bottom: 0;
}

.hx-alerta-analisis {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--hx-border);
    font-size: 0.9rem;
}

.hx-alerta-analisis:last-child {
    border-bottom: none;
}

.hx-indice-analisis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.hx-indice-analisis a {
    display: block;
    padding: 1rem;
    border: 1px solid var(--hx-border);
    border-radius: 0.6rem;
    background: var(--hx-bg);
    color: inherit;
    text-decoration: none;
}

.hx-indice-analisis a:hover {
    border-color: var(--hx-teal-700);
    box-shadow: 0 2px 8px rgba(14, 124, 134, 0.12);
}

.hx-indice-analisis i {
    font-size: 1.5rem;
    color: var(--hx-teal-700);
}

.hx-clase-abc {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    border-radius: 0.3rem;
    font-weight: 700;
    color: #fff;
}

.hx-clase-A { background: #0E7C86; }
.hx-clase-B { background: #F29F05; }
.hx-clase-C { background: #9AA5B1; }

.hx-analisis-encabezado-impreso {
    display: none;
}

@media print {
    body.hx-imprimiendo-pagina .sidebar,
    body.hx-imprimiendo-pagina .hx-barra-usuario,
    body.hx-imprimiendo-pagina .hx-no-imprimir,
    body.hx-imprimiendo-pagina .hx-filtros,
    body.hx-imprimiendo-pagina #blazor-error-ui {
        display: none !important;
    }

    body.hx-imprimiendo-pagina .page,
    body.hx-imprimiendo-pagina main {
        display: block !important;
    }

    body.hx-imprimiendo-pagina article.content {
        padding: 0 !important;
    }

    body.hx-imprimiendo-pagina .hx-analisis-encabezado-impreso {
        display: block;
        border-bottom: 2px solid #333;
        padding-bottom: 0.4rem;
        margin-bottom: 0.8rem;
        font-size: 0.9rem;
    }

    body.hx-imprimiendo-pagina .hx-card,
    body.hx-imprimiendo-pagina .hx-kpi {
        box-shadow: none !important;
        break-inside: avoid;
    }

    body.hx-imprimiendo-pagina .hx-tabla-wrap {
        overflow: visible !important;
        max-height: none !important;
    }

    body.hx-imprimiendo-pagina * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* KPI con comparación: el "vs ..." en letra normal; en el KPI principal (fondo teal) todo en blanco. */
.hx-kpi .hx-kpi-vs {
    font-style: normal;
    font-weight: 400;
    color: var(--hx-ink-soft);
}

.hx-kpi-principal small.text-success,
.hx-kpi-principal small.text-danger,
.hx-kpi-principal small.text-muted,
.hx-kpi-principal .hx-kpi-vs {
    color: #fff !important;
}

/* Barras en el teléfono: el nombre arriba a todo lo ancho, la barra y el valor abajo. */
@media (max-width: 576px) {
    .hx-barra-fila {
        grid-template-columns: 1fr auto;
        row-gap: 0.1rem;
    }

    .hx-barra-etiqueta {
        grid-column: 1 / -1;
        white-space: normal;
    }
}

.hx-mapa-calor td {
    white-space: nowrap;
}

/* Reposición: fila de encabezado de cada proveedor. */
.hx-reposicion-grupo td {
    background: #EEF6F7;
    font-weight: 600;
    color: var(--hx-teal-800);
}

/* Permisos por usuario */
.hx-permiso-pantalla {
    margin: 0.9rem 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}
.hx-permiso-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.hx-permiso-fila.personalizado {
    background: rgba(13, 202, 240, 0.08);
    border-radius: 0.4rem;
}
.hx-permiso-nombre { flex: 1 1 260px; }
.hx-nivel {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.8rem;
    text-align: center;
    margin-right: 0.35rem;
}
.hx-nivel-si { background: #d1f2e0; color: #146c43; }
.hx-nivel-aut { background: #fff3cd; color: #8a6100; }
.hx-nivel-no { background: #f8d7da; color: #a52834; }


/* Mi negocio hoy (panel para el teléfono) */
.hx-panel-sucursales { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.hx-chip {
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
}
.hx-chip.activo { background: #0e7c86; border-color: #0e7c86; color: #fff; }
.hx-panel-principal { text-align: center; }
.hx-panel-monto { font-size: 2.4rem; font-weight: 700; line-height: 1.1; margin: 0.25rem 0; }
.hx-panel-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.hx-panel-mini > div { display: flex; flex-direction: column; background: var(--bs-tertiary-bg); border-radius: 0.5rem; padding: 0.5rem; }
.hx-panel-mini span { font-size: 0.75rem; color: var(--bs-secondary-color); }

/* ---- Fotos de productos ---- */
/* El ícono de cámara junto a un producto que tiene fotos (al tocarlo se abre el visor). */
.hx-boton-foto {
    border: none;
    background: none;
    color: var(--hx-teal-600);
    padding: 0 0.25rem;
    line-height: 1;
    cursor: pointer;
}

    .hx-boton-foto:hover {
        color: var(--hx-teal-800);
    }

.hx-foto-mini {
    position: relative;
    width: 120px;
    height: 120px;
    border: 2px solid var(--hx-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

    .hx-foto-mini.principal {
        border-color: var(--hx-teal-500);
    }

    .hx-foto-mini img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hx-foto-acciones {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-end;
    align-items: center;
    padding: 3px;
    background: rgba(255,255,255,0.85);
}

    .hx-foto-acciones .btn {
        padding: 0 0.35rem;
        font-size: 0.8rem;
    }

.hx-visor-fondo {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hx-visor {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    max-width: min(900px, 100%);
    max-height: 100%;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.hx-visor-grande {
    position: relative;
    text-align: center;
}

    .hx-visor-grande img {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
        border-radius: 6px;
    }

.hx-visor-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.8rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

    .hx-visor-flecha.izquierda { left: 0.25rem; }
    .hx-visor-flecha.derecha { right: 0.25rem; }

.hx-visor-mini {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
}

    .hx-visor-mini.activa {
        border-color: var(--hx-teal-500);
    }