@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

/* ---------- Bazar Solia: enlozado azul + etiqueta de góndola ---------- */
:root {
    --esmalte: #1D4F7C;
    --esmalte-oscuro: #143A5C;
    --tinta: #17212B;
    --tinta-suave: #5A6776;
    --fondo: #EEF2F6;
    --hoja: #FFFFFF;
    --linea: #D8E0E8;
    --etiqueta: #F5C842;
    --etiqueta-tinta: #2B2200;
    --agujero: var(--hoja);
}

/* MudThemeProvider escribe sus variables en :root; html:root les gana. */
html:root {
    --mud-typography-default-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-h1-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-h2-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-h3-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-h4-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-h5-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-h6-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-subtitle1-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-subtitle2-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-body1-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-body2-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-button-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-caption-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
    --mud-typography-button-text-transform: none;
}

body { font-family: 'Archivo', 'Segoe UI', Arial, sans-serif; background: var(--fondo); color: var(--tinta); }

.numeros { font-variant-numeric: tabular-nums; }

/* Barra superior */
.barra-superior { border-bottom: 3px solid var(--esmalte); }
/* Botón de pantalla completa (MainLayout + js/aplicacion.js). */
.pantalla-completa { width: 40px; height: 40px; padding: 8px; margin-right: 4px; border: 0; border-radius: 50%;
    background: transparent; color: var(--tinta-suave); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pantalla-completa:hover { background: rgb(29 79 124 / 0.08); color: var(--esmalte); }
.pantalla-completa__salir { display: none !important; }
:root:fullscreen .pantalla-completa__entrar { display: none !important; }
:root:fullscreen .pantalla-completa__salir { display: inline-block !important; }
.logo { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; text-decoration: none; white-space: nowrap;
    font-weight: 700; font-size: 1.2rem; color: var(--esmalte); letter-spacing: -0.01em; }
.logo__icono { width: 34px; height: 34px; flex: none; }

/* Ícono de Solia en el título de todos los diálogos (los propios y los ShowMessageBox). */
.mud-dialog .mud-dialog-title { display: flex; align-items: center; gap: 10px; }
.mud-dialog .mud-dialog-title::before { content: ""; flex: none; width: 28px; height: 28px;
    background: url("img/icono-solia.svg") center / contain no-repeat; }

/* Encabezado de página */
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.encabezado__texto { display: flex; align-items: flex-start; gap: 8px; }
.encabezado__volver { margin-top: -2px; }
.encabezado__titulo { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 0; color: var(--tinta); }
.encabezado__detalle { color: var(--tinta-suave); margin: 4px 0 0; max-width: 70ch; line-height: 1.45; }
.encabezado__acciones { display: flex; gap: 8px; }

/* Etiqueta de góndola */
.etiqueta {
    position: relative; display: inline-flex; align-items: center;
    padding: 2px 9px 2px 17px; background: var(--etiqueta); color: var(--etiqueta-tinta);
    font-weight: 600; font-size: 0.85rem; line-height: 1.4; white-space: nowrap;
    font-variant-numeric: tabular-nums;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.etiqueta::before {
    content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px;
    border-radius: 50%; background: var(--agujero); transform: translateY(-50%);
}
.etiqueta--grande { font-size: 1.7rem; font-weight: 700; padding: 6px 16px 6px 32px; letter-spacing: -0.01em;
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); }
.etiqueta--grande::before { left: 11px; width: 9px; height: 9px; }

/* Hoja (contenedor blanco) y secciones */
.hoja { background: var(--hoja); border: 1px solid var(--linea); border-radius: 8px; }
.buscador { padding: 16px 20px; margin-bottom: 16px; }
.buscador__ayuda { color: var(--tinta-suave); font-size: 0.85rem; margin: 8px 0 0; }
.seccion { padding: 20px 24px 24px; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion__cabecera { display: flex; align-items: center; gap: 8px; color: var(--esmalte); margin-bottom: 16px; }
.seccion__cabecera h2 { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--tinta); }
.seccion__ayuda { color: var(--tinta-suave); font-size: 0.85rem; margin: -8px 0 16px; max-width: 75ch; }

/* Pantalla de edición: ficha + formulario */
.edicion { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .edicion { grid-template-columns: minmax(0, 1fr); } }

.ficha { --agujero: var(--esmalte); background: var(--esmalte); color: #fff; border-radius: 8px; padding: 24px 22px; position: sticky; top: 88px; }
@media (max-width: 960px) { .ficha { position: static; } }
.ficha__nombre { font-size: 1.35rem; font-weight: 600; line-height: 1.25; margin: 18px 0 16px; overflow-wrap: anywhere; }
.ficha__aviso { background: rgba(255,255,255,0.14); border-radius: 4px; padding: 6px 10px; font-size: 0.85rem; margin-bottom: 12px; }
.ficha__datos { margin: 0; }
.dato { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.16); }
.dato dt { color: rgba(255,255,255,0.72); font-size: 0.85rem; }
.dato dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Barra de acciones fija abajo */
.barra-acciones { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
    margin-top: 24px; padding: 12px 0 14px; background: var(--fondo); border-top: 1px solid var(--linea); }

/* Tablas de búsqueda */
.tabla.mud-table { border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.tabla .mud-table-head .mud-table-cell { font-weight: 600; color: var(--tinta-suave); background: #F6F8FB; }
.tabla .mud-table-row:hover { --agujero: var(--mud-palette-table-hover); }
.tabla__nombre { font-weight: 500; }
.tabla__secundario { color: var(--tinta-suave); }
/* Columnas de datos cortos (número, fecha, importe): nunca se cortan; en la PC se ajustan al contenido y la que
   no la lleva (el nombre) se queda con el resto. En el teléfono la tabla se apila y el ancho no se toca. */
.tabla .mud-table-cell.tabla__ajustada { white-space: nowrap; }
@media (min-width: 600px) { .tabla .mud-table-cell.tabla__ajustada { width: 1%; } }
.vacio { padding: 28px 8px; color: var(--tinta-suave); }

/* ---------- Compacto: un ABM entra en una pantalla (regla del proyecto) ---------- */
.encabezado { margin-bottom: 12px; }
.encabezado__titulo { font-size: 1.45rem; }
.encabezado__detalle { font-size: 0.9rem; margin-top: 2px; }
.edicion { grid-template-columns: 250px minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .edicion { grid-template-columns: minmax(0, 1fr); } }
.ficha { padding: 16px; top: 80px; }
.ficha__nombre { font-size: 1.1rem; margin: 12px 0 10px; }
.ficha__aviso { margin-bottom: 8px; padding: 5px 8px; font-size: 0.8rem; }
.dato { padding: 6px 0; }
.dato dt, .dato dd { font-size: 0.85rem; }
.etiqueta--grande { font-size: 1.35rem; padding: 4px 12px 4px 26px;
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%); }
.etiqueta--grande::before { left: 9px; width: 7px; height: 7px; }
.seccion { padding: 12px 16px 14px; }
.seccion__cabecera { margin-bottom: 10px; }
.seccion__cabecera h2 { font-size: 0.95rem; }
.seccion__ayuda { font-size: 0.8rem; margin: -6px 0 8px; }
.hoja--columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hoja--columnas > .seccion + .seccion { border-top: none; }
.hoja--columnas > .seccion:nth-child(even) { border-left: 1px solid var(--linea); }
.hoja--columnas > .seccion:nth-child(n+3) { border-top: 1px solid var(--linea); }
@media (max-width: 1100px) {
    .hoja--columnas { grid-template-columns: minmax(0, 1fr); }
    .hoja--columnas > .seccion:nth-child(even) { border-left: none; }
    .hoja--columnas > .seccion + .seccion { border-top: 1px solid var(--linea); }
}
.barra-acciones { margin-top: 12px; padding: 8px 0 10px; }

/* Pestañas dentro de la hoja */
.pestanas .mud-tabs-tabbar { border-bottom: 1px solid var(--linea); background: transparent; }
.pestanas .mud-tab { min-height: 42px; font-weight: 600; }
.pestanas__panel { padding: 0; }

/* ---------- Estilos base de la plantilla ---------- */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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;
}

/* ---------- Facturación (presupuesto de salón) ---------- */
/* Alto de la grilla de ítems: lo que sobra de la pantalla. Así la página nunca hace scroll. */
:root { --alto-items: max(180px, calc(100vh - 372px)); }
.encabezado__acciones { align-items: center; }
.venta__abrir { width: 170px; }
.venta__abrir .mud-input-control { margin-top: 0; }
.ficha__total { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.35); }
.ficha__total dt { color: rgba(255,255,255,0.72); font-size: 0.85rem; margin-bottom: 6px; }
.ficha__total dd { margin: 0; }
.ficha__total .etiqueta--grande { font-size: 1.6rem; }
.venta { display: flex; flex-direction: column; min-width: 0; }
.venta__carga { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.venta__buscar { position: relative; flex: 1; min-width: 0; }
.venta__cantidad { width: 90px; flex: none; }
.venta__precio { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 110px; }
.venta__precio > span { font-size: 0.75rem; color: var(--tinta-suave); }
.venta__carga .mud-input-control, .venta__pie .mud-input-control { margin-top: 0; }
.venta__opciones { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--hoja);
    border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 8px 24px rgba(23,33,43,0.16);
    max-height: 560px; overflow-y: auto; padding: 4px; } /* teclas.js la achica si no entra en la ventana */
.venta__opcion { display: flex; align-items: center; gap: 12px; width: 100%; padding: 5px 10px; border: 0; border-radius: 6px;
    background: transparent; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.venta__opcion:hover, .venta__opcion:focus { background: var(--mud-palette-table-hover); outline: none; }
.venta__opcion:focus-visible { box-shadow: inset 0 0 0 2px var(--esmalte); }
.venta__opcion { --agujero: var(--hoja); }
.venta__opcion:hover, .venta__opcion:focus { --agujero: var(--mud-palette-table-hover); }
.venta__opcion-codigo { width: 64px; flex: none; color: var(--tinta-suave); }
.venta__opcion-nombre { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venta__opcion-stock { color: var(--tinta-suave); font-size: 0.8rem; white-space: nowrap; }
.venta__opcion-baja { color: var(--mud-palette-warning); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-left: 6px; }
.venta__opciones-pie { padding: 6px 10px; color: var(--tinta-suave); font-size: 0.8rem; }
.venta__items.tabla.mud-table { border: 0; border-radius: 0; }
.venta__items .mud-table-cell { padding-top: 4px; padding-bottom: 4px; }
.venta__devolucion { color: var(--mud-palette-error); font-weight: 600; }
/* Devolución con otra alícuota que lo vendido: va por nota de crédito (FacturaCaja.PideNotaCredito). */
.venta__aviso-nc { color: var(--mud-palette-error); font-weight: 700; font-size: .78rem; line-height: 1.25; white-space: normal; }
.venta__pie { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(110px, 1fr)); gap: 12px;
    padding: 12px 16px; border-top: 1px solid var(--linea); }
.venta__teclas { color: var(--tinta-suave); font-size: 0.8rem; }

/* ---------- ABM de usuarios: elección del rol ---------- */
.roles { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.roles .mud-radio { align-items: flex-start; }
.roles__nombre { font-weight: 600; margin-right: 6px; }
.roles__detalle { color: var(--tinta-suave); font-size: 0.8rem; }

/* ---------- Listas de casamiento y de stock ---------- */
.listas__filtros { display: grid; grid-template-columns: minmax(0, 1fr) 180px 200px; gap: 12px; align-items: center; }
.listas__filtros .mud-input-control { margin-top: 0; }
.listas__avance { display: flex; align-items: center; gap: 8px; }
.listas__avance .mud-progress-linear { flex: 1; }
.listas__avance span { font-size: 0.8rem; color: var(--tinta-suave); white-space: nowrap; }
.listas__danada { font-size: 0.8rem; color: var(--mud-palette-error); white-space: nowrap; }
.lista__entregado { background: #F1F6EF; }
.lista__entregado .tabla__nombre { color: var(--tinta-suave); }
@media (max-width: 700px) { .listas__filtros { grid-template-columns: minmax(0, 1fr); } }
/* Lista: las dos opciones de carga (cantidad 1 y alta automática) con texto; prendidas, en el amarillo de etiqueta. */
.lista__opcion.mud-button-root { white-space: nowrap; }
.lista__opcion--prendida.mud-button-root { background: #F5C842; border-color: #C9A21F; color: var(--tinta); font-weight: 700; }
.lista__opcion--prendida.mud-button-root:hover { background: #EDBB2C; }

/* Hoja de la lista para imprimir (plipd10 / plipd11) */
.hoja-lista { width: 194mm; font-family: Arial, sans-serif; font-size: 9pt; color: #000; }
.hoja-lista__cabecera { display: flex; justify-content: space-between; gap: 8mm; border-bottom: 1px solid #000; padding-bottom: 3mm; margin-bottom: 3mm; line-height: 1.5; }
.hoja-lista__cabecera span { color: #444; }
.hoja-lista__tipo { font-weight: 700; font-size: 12pt; margin-bottom: 1mm; }
.hoja-lista__nombre { font-size: 11pt; font-weight: 600; }
.hoja-lista__numero { text-align: right; }
.hoja-lista__numero > div:first-child { font-size: 13pt; font-weight: 700; }
.hoja-lista__items { width: 100%; border-collapse: collapse; }
.hoja-lista__items th { text-align: left; border-bottom: 1px solid #000; padding: 1mm 1.5mm; font-weight: 600; }
.hoja-lista__items td { padding: 0.6mm 1.5mm; border-bottom: 1px solid #ddd; }
.hoja-lista__items .num { text-align: right; font-variant-numeric: tabular-nums; }
.hoja-lista__items .num-izq { font-variant-numeric: tabular-nums; }
.hoja-lista__items tfoot td { border-top: 1px solid #000; border-bottom: none; font-weight: 600; padding-top: 1.5mm; }
.hoja-lista__entregado td { color: #555; font-style: italic; }
.hoja-lista__items tr { break-inside: avoid; }
@media print { .hoja-lista { width: auto; } }

/* ---------- Etiquetas de góndola ---------- */
.etiquetas__formato { width: 290px; }
.etiquetas__formato .mud-input-control { margin-top: 0; }
.etiquetas__celda { margin-top: 0 !important; }
.etiquetas__celda input { padding-top: 2px !important; padding-bottom: 2px !important; }
.etiquetas__muestra { margin-top: 14px; padding: 6px; background: #fff; border-radius: 6px; display: flex; justify-content: center; }
.etiquetas__listas { max-height: 50vh; overflow-y: auto; }

/* Una etiqueta (medidas en mm, ver EtiquetaVista.razor). */
.etiqueta-gondola { position: relative; overflow: visible; background: #fff; color: #000; }
.etiqueta-gondola > * { position: absolute; box-sizing: border-box; }
.etiqueta-gondola__recuadro { border: 0.3mm solid #000; }
.etiqueta-gondola__linea { border: 0 solid #000; }
.etiqueta-gondola__texto { white-space: nowrap; overflow: hidden; line-height: 1; display: flex; align-items: center; }
.etiqueta-gondola__texto[style*="text-align:center"] { justify-content: center; }
.etiqueta-gondola__texto[style*="text-align:right"] { justify-content: flex-end; }
.etiqueta-gondola__logo { object-fit: contain; object-position: center; padding: 0.4mm; }
.etiqueta-gondola__guarda {
    background: repeating-linear-gradient(45deg, #000 0 0.35mm, transparent 0.35mm 1.1mm);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.etiqueta-gondola__guarda--cruzada {
    background:
        repeating-linear-gradient(45deg, #000 0 0.3mm, transparent 0.3mm 1.2mm),
        repeating-linear-gradient(-45deg, #000 0 0.3mm, transparent 0.3mm 1.2mm);
}

/* Hojas A4 de etiquetas (EtiquetasImprimir.razor). */
.hoja-etiquetas { display: grid; align-content: start; width: 200mm; height: 287mm; padding: 0; margin: 0 0 8mm;
    background: #fff; outline: 1px dashed #bbb; break-after: page; }
.hoja-etiquetas:last-child { break-after: auto; }
/* Página con nombre: las etiquetas usan 5 mm de margen sin cambiar el del ticket del presupuesto (8 mm). */
@page etiquetas { size: A4 portrait; margin: 5mm; }
.hoja-etiquetas { page: etiquetas; }
@media print {
    .hoja-etiquetas { outline: none; margin: 0; height: auto; }
}

/* ---------- Consulta de presupuestos ---------- */
.presupuestos__filtros { display: grid; grid-template-columns: minmax(0, 1fr) 160px 160px 170px; gap: 12px; align-items: center; }
.presupuestos__filtros .mud-input-control { margin-top: 0; }
.presupuestos { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.presupuestos__elegido { background: var(--mud-palette-table-hover); }
.presupuestos__elegido .etiqueta { --agujero: var(--mud-palette-table-hover); }
.presupuestos__detalle { display: flex; flex-direction: column; height: calc(100vh - 300px); min-height: 260px; }
.presupuestos__detalle > .vacio { padding: 28px 16px; }
.presupuestos__cabecera { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.presupuestos__factura { margin-top: 4px; color: var(--mud-palette-success); font-weight: 600; font-size: 0.85rem; }
.presupuestos__items { flex: 1; overflow-y: auto; padding: 4px 16px; }
.presupuestos__tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.presupuestos__tabla th { text-align: left; color: var(--tinta-suave); font-weight: 600; padding: 4px 4px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--hoja); }
.presupuestos__tabla td { padding: 3px 4px; border-bottom: 1px solid #EEF2F6; vertical-align: top; }
.presupuestos__tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.presupuestos__totales { margin: 0; padding: 8px 16px; border-top: 1px solid var(--linea); }
.presupuestos__totales > div { display: flex; justify-content: space-between; padding: 2px 0; font-size: 0.9rem; }
.presupuestos__totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.presupuestos__total { font-weight: 700; font-size: 1.05rem !important; }
.presupuestos__acciones { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--linea); }
@media (max-width: 1100px) { .presupuestos { grid-template-columns: minmax(0, 1fr); } .presupuestos__filtros { grid-template-columns: 1fr 1fr; } }

/* ---------- Consulta de facturas (usa también las clases de la consulta de presupuestos) ---------- */
.facturas__filtros { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px 160px 160px; gap: 12px; align-items: center; }
.facturas__filtros .mud-input-control { margin-top: 0; }
.facturas__tipo { display: inline-block; min-width: 26px; margin-right: 6px; padding: 0 5px; border-radius: 4px; font-size: 0.72rem;
    font-weight: 700; text-align: center; color: var(--esmalte); background: var(--mud-palette-table-hover); }
.facturas__tipo--nc { color: var(--mud-palette-error); }
.facturas__titulo { font-weight: 600; margin-bottom: 2px; }
.facturas__pagos > div { font-size: 0.85rem; }
@media (max-width: 1100px) { .facturas__filtros { grid-template-columns: 1fr 1fr; } }

/* ---------- Usuario en la barra y pantalla de ingreso ---------- */
.usuario-actual { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-suave); font-size: 0.9rem; margin-right: 8px; }
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--fondo); }
.ingreso__tarjeta { width: 100%; max-width: 360px; background: var(--hoja); border: 1px solid var(--linea);
    border-top: 4px solid var(--esmalte); border-radius: 8px; padding: 28px 28px 32px; }
.ingreso__marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--esmalte); letter-spacing: -0.01em; }
.ingreso__icono { width: 40px; height: 40px; flex: none; }
.ingreso__titulo { font-size: 1.6rem; font-weight: 700; margin: 14px 0 4px; letter-spacing: -0.015em; }
.ingreso__ayuda { color: var(--tinta-suave); font-size: 0.9rem; margin: 0 0 20px; }
.ingreso__form { display: flex; flex-direction: column; }
.ingreso__etiqueta { font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.ingreso__campo { font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-inputs, #B9C4D0);
    border-radius: 6px; margin-bottom: 16px; color: var(--tinta); background: #fff; }
.ingreso__campo:focus { outline: 2px solid var(--esmalte); outline-offset: -1px; border-color: var(--esmalte); }
.ingreso__campo--mayusculas { text-transform: uppercase; letter-spacing: 0.08em; }
.ingreso__error { background: #FBEAE9; color: #8C1D18; border-radius: 6px; padding: 8px 10px; font-size: 0.9rem; margin: -4px 0 16px; }
.ingreso__boton { font: inherit; font-weight: 600; font-size: 1rem; padding: 11px; border: 0; border-radius: 6px;
    background: var(--esmalte); color: #fff; cursor: pointer; }
.ingreso__boton:hover { background: var(--esmalte-oscuro); }
.ingreso__boton:focus-visible { outline: 3px solid var(--etiqueta); outline-offset: 2px; }

/* ---------- Hoja del presupuesto para imprimir (copia de presutiq: A4, dos copias) ---------- */
.impresion { background: #fff; min-height: 100vh; padding: 16px; color: #000; }
.impresion__barra { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.impresion__barra .ingreso__boton { padding: 8px 20px; }
.impresion__error { color: #8C1D18; }
.hoja-ticket { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; width: 194mm; font-family: Arial, sans-serif; font-size: 9pt; }
.ticket { border: 1px dashed #999; padding: 4mm; }
.ticket__cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 3mm; }
.ticket__tipo { font-weight: 700; font-size: 11pt; letter-spacing: 0.04em; }
.ticket__numero { font-size: 13pt; font-weight: 700; margin-top: 1mm; font-variant-numeric: tabular-nums; }
.ticket__aviso { font-family: 'Courier New', monospace; font-size: 7.5pt; margin-top: 1mm; }
.codigo-barras { width: 42mm; height: 11mm; flex: none; }
.ticket__cliente { margin: 3mm 0; line-height: 1.5; }
.ticket__cliente span { color: #444; }
.ticket__fecha { float: right; color: #000 !important; }
.ticket__items { width: 100%; border-collapse: collapse; font-size: 8pt; }
.ticket__items th { text-align: left; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 1mm 0; font-weight: 600; }
.ticket__items td { padding: 0.4mm 0; }
.ticket__items .num { text-align: right; font-variant-numeric: tabular-nums; }
.ticket__item { break-inside: avoid; }
.ticket__item tr:last-child td { padding-bottom: 1mm; }
.ticket__totales { margin: 2mm 0 0; border-top: 1px solid #000; padding-top: 1.5mm; }
.ticket__totales > div { display: flex; justify-content: space-between; padding: 0.4mm 0; }
.ticket__totales dd { margin: 0; font-variant-numeric: tabular-nums; }
.ticket__total { font-weight: 700; font-size: 10pt; border-top: 1px solid #000; margin-top: 1mm; padding-top: 1mm !important; }
@media print {
    @page { size: A4 portrait; margin: 8mm; }
    .no-imprimir { display: none !important; }
    .impresion { padding: 0; min-height: 0; }
    .ticket { border: none; }
    .hoja-ticket { width: auto; }
}

/* ---------- Caja (menufiscal) ---------- */
.caja > .seccion:nth-child(3) { grid-column: 1 / -1; }
.caja__fecha { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.caja__fecha .mud-input-control { max-width: 180px; }
.caja__reporte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.caja__tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.caja__tabla th { text-align: left; font-weight: 600; color: var(--tinta-suave); font-size: 0.8rem; padding: 2px 6px; border-bottom: 1px solid var(--linea); }
.caja__tabla td { padding: 3px 6px; }
.caja__tabla th:not(:first-child), .caja__tabla td:not(:first-child) { text-align: right; }
.caja__total td { font-weight: 600; border-top: 1px solid var(--linea); }
.caja__aparte td { border-top: 1px dashed var(--linea); }
.caja__tabla--cierres { font-size: 0.85rem; }
.caja__tabla--cierres td, .caja__tabla--cierres th { white-space: nowrap; }
.caja__tabla--cierres td:nth-child(2), .caja__tabla--cierres th:nth-child(2) { text-align: center; }
@media (max-width: 1100px) { .caja > .seccion:nth-child(3) { grid-column: auto; overflow-x: auto; } }

/* ---------- Facturar en caja (pacfa02) ---------- */
/* Misma estructura que el presupuesto: fila de arriba (cliente), grilla con --alto-items y fila de cobro abajo. */
.cobro__cliente { flex: 1; min-width: 0; }
/* El cliente va en el encabezado (arriba de la grilla queda la carga de artículos). */
.facturar__cliente { width: 300px; }
.facturar__cliente .mud-input-control { margin-top: 0; }
/* Nota de crédito: letra y número de la factura original, y el aviso en lugar de la carga de artículos. */
.facturar__letra { width: 80px; flex: 0 0 auto; }
.facturar__factura { width: 220px; }
.facturar__letra .mud-input-control, .facturar__factura .mud-input-control { margin-top: 0; }
.venta__factura-original { padding: 8px 16px; border-bottom: 1px solid var(--linea); }
/* Precio a mano del 88 "varios". */
.venta__precio-varios { width: 130px; flex: none; }
.cobro { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)) minmax(150px, 1.2fr); gap: 12px; align-items: center;
    padding: 12px 16px; border-top: 1px solid var(--linea); }
.cobro .mud-input-control { margin-top: 0; }
.cobro > .cobro__ajustes { display: none; }

/* Descuento destacado en el encabezado de Facturar, antes del cliente (DescuentoDestacado.razor). Darth eligió el C
   (30/10); el A y el B quedan acá para poder cambiar: en el componente están comentados. */
.descuento-destacado { flex: none; white-space: nowrap; }
.descuento-destacado--c { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; box-sizing: border-box;
    border: 2px solid #C77700; border-radius: 6px; background: #FFF6E5; color: #8A4F00; }
.descuento-destacado__texto { display: flex; flex-direction: column; line-height: 1.05; }
.descuento-destacado__texto small { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; }
.descuento-destacado__texto strong { font-size: 0.95rem; color: #5A3300; }
.descuento-destacado--a { font-size: 1rem; font-weight: 700; padding: 6px 12px 6px 24px; }
.descuento-destacado--b { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px;
    background: #E0457B; color: #fff; font-weight: 700; font-size: 0.95rem; box-shadow: 0 1px 3px rgb(224 69 123 / 0.4); }
/* Salto de fila del encabezado de Facturar: solo en el teléfono. */
.encabezado__salto { display: none; }
.cobro__estado { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 40px;
    padding: 2px 12px; border-radius: 6px; border: 1px solid var(--linea); }
.cobro__estado > span { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); }
.cobro__estado > strong { font-size: 1.2rem; line-height: 1.2; }
.cobro__estado--listo { border-color: var(--mud-palette-success); }
.cobro__estado--listo > span { color: var(--mud-palette-success); }
.cobro__estado--vuelto { border-color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent); }
.cobro__estado--vuelto > span { color: var(--mud-palette-info); }
.cobro__estado--restan { border-color: var(--mud-palette-error); }
.cobro__estado--restan > span, .cobro__estado--restan > strong { color: var(--mud-palette-error); }
/* Nota de crédito: la ficha en verde, como el fondo verde de pacfa02 con 4, para no confundirla con una factura. */
.edicion--nota-credito .ficha { --agujero: #2E7D4F; background: #2E7D4F; }
@media (max-width: 1100px) { .cobro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Menú lateral: títulos de grupo ---------- */
.menu__grupo { padding: 14px 16px 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--tinta-suave); }

/* ---------- Inicio: accesos agrupados como el menú ---------- */
.inicio { display: flex; flex-direction: column; gap: 14px; }
.inicio__grupo h2 { margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--tinta-suave); }
.inicio__accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; max-width: 1120px; }
/* Tarjeta de una opción (Shared/AccesoInicio.razor): ícono en cuadrado celeste, título, para qué es y flecha. */
.acceso { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; background: var(--hoja);
    border: 1px solid var(--linea); border-radius: 10px; color: var(--tinta); text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s; }
.acceso:hover { border-color: var(--esmalte); box-shadow: 0 2px 10px rgb(29 79 124 / 0.14); }
.acceso:focus-visible { outline: 2px solid var(--esmalte); outline-offset: 2px; }
.acceso__icono { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px;
    background: #E6EEF6; color: var(--esmalte); }
.acceso__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acceso__titulo { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
/* El detalle baja de renglón: con "…" se cortaba en la notebook (Darth 03/11: nada cortado). */
.acceso__detalle { font-size: 0.78rem; line-height: 1.3; color: var(--tinta-suave); }
.acceso__flecha.mud-icon-root { flex: none; color: #A9B6C4; transition: transform 0.15s, color 0.15s; }
.acceso:hover .acceso__flecha.mud-icon-root { transform: translateX(2px); color: var(--esmalte); }
body.con-fondo.fondo--transluce .acceso { background: rgb(255 255 255 / var(--hoja-opacidad, 0.8)); backdrop-filter: blur(10px); }

/* ---------- Menús configurables (botón Vista de la barra; Menu/VistaMenu.cs, Darth 03/11) ---------- */
/* Menú de la izquierda, grupos plegables (MenuLateral): el título del grupo es un botón con la flecha. */
.menu__grupo--boton { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box;
    padding-right: 12px; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.menu__grupo--boton:hover { color: var(--esmalte); }
.menu__plegar.mud-icon-root { transition: transform 0.15s; }
.menu__grupo--boton[aria-expanded="false"] .menu__plegar { transform: rotate(-90deg); }
/* Solo íconos (MudDrawer Mini). Al pasar el mouse el menú se abre y NADA se tiene que mover (Darth 04/11: se "perdía"
   el ícono apuntado). Por eso el título del grupo ocupa el mismo alto abierto o cerrado: cerrado, el texto es
   transparente y se ve una raya en el medio; abierto, el texto. Sin saltos de renglón mientras el ancho se anima. */
.mud-drawer-mini .menu__grupo { position: relative; height: 28px; box-sizing: border-box; padding: 12px 16px 0;
    line-height: 16px; white-space: nowrap; overflow: hidden; transition: color 0.15s; }
.mud-drawer-mini .mud-nav-link-text { white-space: nowrap; overflow: hidden; }
.mud-drawer-mini.mud-drawer--closed .menu__grupo { color: transparent; }
.mud-drawer-mini.mud-drawer--closed .menu__grupo::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%;
    border-top: 1px solid var(--linea); }
/* Abierto con el mouse (MainLayout pone menu-flotante en MudLayout): flota encima de la pantalla, que no se corre.
   Abierto con el botón de arriba, empuja la pantalla como siempre. */
@media (min-width: 960px) {
    .menu-flotante .mud-main-content { margin-left: var(--mud-drawer-width-mini-left) !important; }
    .menu-flotante .mud-drawer-mini.mud-drawer--open { box-shadow: 4px 0 16px rgb(23 33 43 / 0.18); }
}

/* Estrella de favorito (Shared/Estrella.razor): un botón al lado del enlace, nunca adentro. */
.estrella { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #A9B6C4; cursor: pointer; }
.estrella:hover { color: #B8860B; background: rgb(245 200 66 / 0.2); }
.estrella:focus-visible { outline: 2px solid var(--esmalte); outline-offset: 1px; }
.estrella--marcada { color: #B8860B; }
.acceso-envoltura { position: relative; display: flex; }
.acceso-envoltura > .acceso { flex: 1; min-width: 0; }
.acceso--con-estrella { padding-right: 44px; }
.acceso-envoltura > .estrella { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }

/* Buscador del Inicio ("¿Qué querés hacer?"): Enter abre la primera, Esc borra. */
.inicio-buscador { display: flex; align-items: center; gap: 10px; max-width: 1120px; height: 46px; padding: 0 14px; box-sizing: border-box;
    border: 2px solid var(--esmalte); border-radius: 10px; background: var(--hoja); color: var(--esmalte); }
.inicio-buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--tinta); }
.inicio-buscador kbd { flex: none; padding: 1px 6px; border: 1px solid var(--linea); border-radius: 4px; font: inherit; font-size: 0.75rem; color: var(--tinta-suave); }
.inicio__vacio { padding: 4px 2px; color: var(--tinta-suave); }

/* Inicio "Tablero": una columna por grupo, renglones compactos (entra entero en 1366×620). */
.tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; max-width: 1120px; align-items: start; }
.tablero__columna { padding: 10px 6px 6px; border: 1px solid var(--linea); border-radius: 10px; background: var(--hoja); }
.tablero__columna h2 { margin: 0 8px 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.tablero__renglon { display: flex; align-items: center; }
.tablero__renglon > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 7px;
    color: var(--tinta); text-decoration: none; }
.tablero__renglon > a:hover { background: #EAF1F8; color: var(--esmalte); }
.tablero__renglon > a:focus-visible { outline: 2px solid var(--esmalte); outline-offset: -2px; }
.tablero__renglon .mud-icon-root { flex: none; color: var(--esmalte); }
.tablero__titulo { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 500; line-height: 1.25; }
.tablero__renglon .pastilla-aviso { margin-left: 0; }

/* Inicio "Destacados": las primeras cuatro grandes (azul enlozado + ícono en amarillo de etiqueta) y el resto en chips. */
.destacados { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; max-width: 1120px; }
.destacado { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 104px; padding: 14px 16px; box-sizing: border-box;
    border-radius: 12px; background: var(--esmalte); color: #fff; text-decoration: none; }
.destacado:hover { background: var(--esmalte-oscuro); }
.destacado:focus-visible { outline: 3px solid var(--etiqueta); outline-offset: 2px; }
.destacado__icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--etiqueta); color: var(--etiqueta-tinta); }
.destacado__titulo { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.destacado__detalle { font-size: 0.82rem; line-height: 1.3; opacity: 0.85; }
.destacado .pastilla-aviso { position: absolute; top: 14px; right: 14px; margin: 0; }
/* Estrella en la esquina de la tarjeta grande (orden "Favoritos primero"); la pastilla se corre a su izquierda. */
.destacado-envoltura { position: relative; display: flex; }
.destacado-envoltura > .destacado { flex: 1; min-width: 0; }
.destacado-envoltura > .estrella { position: absolute; top: 8px; right: 8px; color: rgb(255 255 255 / 0.7); }
.destacado-envoltura > .estrella:hover { color: var(--etiqueta); background: rgb(255 255 255 / 0.15); }
.destacado-envoltura > .estrella--marcada { color: var(--etiqueta); }
.destacado-envoltura--con-estrella .destacado .pastilla-aviso { right: 44px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 8px; max-width: 1120px; }
.chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--linea); border-radius: 18px; background: var(--hoja); }
.chip:hover { border-color: var(--esmalte); }
.chip > a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 12px 6px 8px; border-radius: 18px;
    color: var(--tinta); font-size: 0.88rem; text-decoration: none; }
.chip > a:hover { color: var(--esmalte); }
.chip .mud-icon-root { flex: none; color: var(--esmalte); }
.chip .pastilla-aviso { margin-left: 2px; }
.chip > .estrella { width: 26px; height: 26px; margin: 0 4px 0 -8px; }

/* Diálogo "Cómo ver los menús" (VistaMenuDialogo): cada opción es una tarjeta; la elegida, en azul. */
.vista-menu { display: flex; flex-direction: column; gap: 14px; }
.vista-menu h3 { margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.vista-menu__opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.vista-menu__opcion { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--linea);
    border-radius: 8px; cursor: pointer; }
.vista-menu__opcion:hover { border-color: var(--esmalte); }
.vista-menu__opcion--elegida { padding: 7px 9px; border: 2px solid var(--esmalte); background: #EAF1F8; }
.vista-menu__opcion:has(input:focus-visible) { outline: 2px solid var(--esmalte); outline-offset: 2px; }
.vista-menu__opcion input { position: absolute; opacity: 0; pointer-events: none; }
.vista-menu__titulo { font-size: 0.9rem; font-weight: 600; color: var(--tinta); }
.vista-menu__detalle { font-size: 0.78rem; line-height: 1.3; color: var(--tinta-suave); }
.vista-menu__nota { margin: 0; font-size: 0.8rem; color: var(--tinta-suave); }

/* Transluce: lo nuevo del Inicio también deja ver el fondo (como .acceso). */
body.con-fondo.fondo--transluce .tablero__columna,
body.con-fondo.fondo--transluce .chip,
body.con-fondo.fondo--transluce .inicio-buscador { background: rgb(255 255 255 / var(--hoja-opacidad, 0.8)); backdrop-filter: blur(10px); }

/* Teléfono: nada cortado. Tablero en una columna, destacados de a dos y sin detalle (el título entra entero). */
@media (max-width: 700px) {
    .tablero { grid-template-columns: 1fr; }
    .destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .destacado { min-height: 0; padding: 12px; }
    .destacado__detalle { display: none; }
}

/* ---------- Aviso de precios pendientes (AvisoPrecios): Inicio, tarjeta y menú ---------- */
.pastilla-aviso { display: inline-block; flex: none; min-width: 22px; margin-left: 8px; padding: 1px 7px; box-sizing: border-box;
    border-radius: 11px; background: var(--etiqueta); color: var(--etiqueta-tinta); font-size: 0.75rem; font-weight: 700;
    line-height: 18px; text-align: center; }
.acceso .pastilla-aviso { margin-left: 0; }
/* En la barra de arriba (todas las pantallas). En el teléfono, solo el ícono y el número. */
.aviso-barra { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-right: 8px; padding: 0 6px 0 10px;
    box-sizing: border-box; border: 2px solid #C77700; border-radius: 17px; background: #FFF6E5; color: #8A4F00;
    font: inherit; font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; flex: none; }
.aviso-barra .mud-icon-root { color: #C77700; }
.aviso-barra .pastilla-aviso { margin-left: 0; }
.aviso-barra:hover { background: #FFEBC7; }
/* Licencia de uso (ControlLicencia): naranja por vencer; rojo vencida o en días de gracia. Sin pastilla, margen parejo. */
.aviso-barra--licencia:not(:has(.pastilla-aviso)) { padding-right: 10px; }
.aviso-barra--vencida { border-color: #B3261E; background: #FDECEA; color: #8C1D18; }
.aviso-barra--vencida .mud-icon-root { color: #B3261E; }
.aviso-barra--vencida:hover { background: #FAD7D3; }
@media (max-width: 700px) {
    .aviso-barra { margin-right: 2px; }
    /* Con el aviso no entra "Bazar Solia" en una línea: queda el ícono (sigue llevando al inicio). */
    .barra-superior:has(.aviso-barra) .logo span { display: none; }
}
.aviso-precios { display: flex; align-items: center; gap: 12px; max-width: 1120px; padding: 10px 12px; box-sizing: border-box;
    border: 2px solid #C77700; border-radius: 10px; background: #FFF6E5; color: #8A4F00; }
.aviso-precios__icono.mud-icon-root { flex: none; color: #C77700; }
.aviso-precios__texto { flex: 1; min-width: 0; line-height: 1.35; }
.aviso-precios__boton { flex: none; }
/* Teléfono: el texto en renglones enteros (nada cortado) y el botón a lo ancho, debajo. */
@media (max-width: 700px) {
    .aviso-precios { flex-wrap: wrap; align-items: flex-start; }
    .aviso-precios__texto { flex-basis: calc(100% - 36px); }
    .aviso-precios__boton { width: 100%; }
}

/* ---------- Abono del sistema (abono.scx) y su recibo (abono.frx) ---------- */
.abono__periodo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 4px; }
.recibo-abono { width: 180mm; font-family: Arial, sans-serif; font-size: 12pt; color: #000; padding-top: 10mm; }
.recibo-abono__lugar { text-align: right; margin-bottom: 14mm; }
.recibo-abono__texto { line-height: 1.8; text-align: justify; margin: 0 0 30mm; }
.recibo-abono__firma { width: 75mm; margin-left: auto; text-align: center; line-height: 1.5; }
.recibo-abono__linea { border-top: 1px dotted #000; margin-bottom: 2mm; }
@media print { .recibo-abono { width: auto; } }

/* ---------- Subdiario de ventas (plifa10PABLO) y su hoja (plifa10flavia) ---------- */
.subdiario__filtros { display: grid; grid-template-columns: 160px 160px 190px 150px auto; gap: 12px; align-items: center; }
.subdiario__filtros .mud-input-control { margin-top: 0; }
.subdiario__atajos { display: flex; gap: 4px; justify-content: flex-end; }
.subdiario__totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.subdiario__total { display: flex; flex-direction: column; padding: 8px 14px; }
.subdiario__total > span { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); }
.subdiario__total > strong { font-size: 1.15rem; line-height: 1.3; }
.subdiario__total > small { color: var(--tinta-suave); font-size: 0.75rem; }
.subdiario__total--general { background: var(--esmalte); border-color: var(--esmalte); color: #fff; }
.subdiario__total--general > span, .subdiario__total--general > small { color: rgba(255,255,255,0.8); }
.subdiario__grilla { height: calc(100vh - 360px); min-height: 260px; overflow: auto; }
.subdiario__tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.subdiario__tabla th { text-align: left; color: var(--tinta-suave); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--linea);
    position: sticky; top: 0; background: #F6F8FB; white-space: nowrap; }
.subdiario__tabla td { padding: 3px 8px; border-bottom: 1px solid #EEF2F6; white-space: nowrap; }
.subdiario__tabla td:nth-child(4) { white-space: normal; }
.subdiario__tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.subdiario__dia td { font-weight: 600; background: #F8FAFC; border-bottom: 1px solid var(--linea); }
@media (max-width: 1100px) { .subdiario__filtros { grid-template-columns: 1fr 1fr; } }

/* Desglose de caja (/caja/desglose): filtros como el subdiario, grilla por día. */
.desglose__filtros { display: grid; grid-template-columns: 160px 160px 150px auto; gap: 12px; align-items: center; }
.desglose__filtros .mud-input-control { margin-top: 0; }
.desglose__grilla { max-height: calc(100vh - 380px); min-height: 160px; overflow: auto; }
@media (max-width: 1100px) { .desglose__filtros { grid-template-columns: 1fr 1fr; } }

@page subdiario { size: A4 landscape; margin: 8mm; }
.hoja-subdiario { page: subdiario; width: 281mm; font-family: Arial, sans-serif; font-size: 8pt; color: #000; }
.hoja-subdiario__cabecera { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6mm; align-items: start;
    border-bottom: 1px solid #000; padding-bottom: 2mm; margin-bottom: 2mm; line-height: 1.5; }
.hoja-subdiario__empresa { font-weight: 700; font-size: 10pt; }
.hoja-subdiario__titulo { text-align: center; }
.hoja-subdiario__titulo > div:first-child { font-weight: 700; font-size: 12pt; letter-spacing: 0.04em; }
.hoja-subdiario__emitido { text-align: right; color: #444; }
.hoja-subdiario__items { width: 100%; border-collapse: collapse; }
.hoja-subdiario__items th { text-align: left; border-bottom: 1px solid #000; padding: 1mm 1.2mm; font-weight: 600; }
.hoja-subdiario__items td { padding: 0.4mm 1.2mm; white-space: nowrap; }
.hoja-subdiario__items .num, .hoja-subdiario__items th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hoja-subdiario__items .num-izq { font-variant-numeric: tabular-nums; }
.hoja-subdiario__items tr { break-inside: avoid; }
.hoja-subdiario__dia td { font-weight: 600; border-top: 1px solid #999; padding-bottom: 1.2mm; }
.hoja-subdiario__items tfoot td { border-top: 1.5px solid #000; font-weight: 700; padding-top: 1.5mm; }
@media print { .hoja-subdiario { width: auto; } }

/* Hoja del desglose de caja (/caja/desglose/imprimir): A4 vertical, usa las clases de la hoja del subdiario. */
@page desglose { size: A4; margin: 10mm; }
.hoja-desglose { page: desglose; width: 190mm; font-family: Arial, sans-serif; font-size: 9pt; color: #000; }
.hoja-desglose .hoja-subdiario__items { margin-bottom: 3mm; }
.hoja-desglose__medios { width: 120mm !important; font-size: 10pt; }
.hoja-desglose__nota { color: #444; font-size: 8pt; margin: 0 0 5mm; }
@media print { .hoja-desglose { width: auto; } }

/* ---------- Cambio de precios (/precios/cambio, como modipre3) ----------
   Filtros y herramientas compactos; la grilla tiene su propio scroll con el encabezado fijo, así la pantalla no baja. */
.precios__filtros { display: grid; grid-template-columns: minmax(260px, 1fr) 130px 130px auto minmax(220px, 300px); gap: 12px;
    align-items: center; padding: 12px 16px; margin-bottom: 10px; }
.precios__filtros .mud-input-control, .precios__herramientas .mud-input-control { margin-top: 0; }
.precios__herramientas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 8px 16px; margin-bottom: 10px; }
.precios__herramientas .precios__filtro { flex: 1 1 260px; max-width: 380px; }
.precios__ajuste { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.precios__ajuste .precios__ajuste-tipo { width: 270px; flex: none; }
.precios__ajuste .precios__ajuste-valor { width: 110px; flex: none; }
.precios__grilla { max-height: calc(100vh - 372px); min-height: 160px; overflow: auto; }
.precios__tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.precios__tabla th { position: sticky; top: 0; z-index: 1; background: #F6F8FB; text-align: left; color: var(--tinta-suave);
    font-weight: 600; padding: 6px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.precios__tabla td { padding: 2px 6px; border-bottom: 1px solid #EEF2F6; white-space: nowrap; }
.precios__tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
/* La descripción se queda con el ancho que sobra y se corta con "…" (entera en el title). */
.precios__tabla td.precios__descripcion { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
.precios__celda { width: 88px; padding: 3px 6px; border: 1px solid var(--linea); border-radius: 4px; background: transparent;
    font: inherit; text-align: right; font-variant-numeric: tabular-nums; color: inherit; }
.precios__celda--chica { width: 66px; }
.precios__celda:focus { outline: 2px solid var(--esmalte); outline-offset: -1px; background: var(--hoja); }
.precios__celda:disabled { border-color: transparent; }
.precios__accion { width: 1%; }
.precios__fila--fuera td { color: var(--tinta-suave); opacity: 0.7; }
.precios__fila--cambia .precios__nuevo { color: #D9480F; font-weight: 700; }
.precios__fila--error td { background: rgb(244 67 54 / 0.07); }
.precios__sube { color: #D9480F; }
.precios__baja { color: var(--mud-palette-success); }
.precios__marca { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 0.7rem; line-height: 1.5;
    background: var(--etiqueta); color: var(--etiqueta-tinta); vertical-align: middle; }
.precios__resumen { color: var(--tinta-suave); font-size: 0.9rem; }
.precios__resumen strong { color: var(--tinta); }
.precios__resumen-error { color: var(--mud-palette-error); font-weight: 600; }
.precio-movil { padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.precio-movil:last-child { border-bottom: 0; }
.precio-movil--lista { color: var(--tinta-suave); font-size: 0.85rem; overflow-wrap: anywhere; }
.precio-movil__nombre { font-weight: 500; overflow-wrap: anywhere; }
.precio-movil__datos { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.85rem; color: var(--tinta-suave); }
.precio-movil__datos strong { color: var(--tinta); }
@media (max-width: 1100px) { .precios__filtros { grid-template-columns: 1fr 1fr; } }
/* Teléfono: solo consulta. Un campo por fila (ninguno cortado) y sin la barra de grabar. */
@media (max-width: 700px) {
    .precios__filtros { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; margin-bottom: 6px; }
    .precios__herramientas { padding: 8px; margin-bottom: 6px; }
    .precios__herramientas .precios__filtro { max-width: none; flex-basis: 100%; }
    .precios .barra-acciones { display: none; }
}

/* Precios pendientes (/precios/pendientes, como actupre2): proveedores a la izquierda, detalle a la derecha. */
.pendientes { display: grid; grid-template-columns: minmax(330px, 440px) minmax(0, 1fr); gap: 12px; align-items: start; }
.pendientes__proveedores { max-height: calc(100vh - 290px); min-height: 160px; overflow: auto; }
.pendientes__detalle { display: flex; flex-direction: column; min-width: 0; }
.pendientes__titulo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--linea); }
.pendientes__nombre { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pendientes__nombre strong { overflow-wrap: anywhere; }
.pendientes__nombre small { color: var(--tinta-suave); }
.pendientes__renglones { max-height: calc(100vh - 345px); min-height: 120px; overflow: auto; }
.pendientes__fila { cursor: pointer; }
.pendientes__fila:hover td { background: #F6F8FB; }
.pendientes__fila--vista td { background: rgb(29 79 124 / 0.09); }
.pendientes__codigo { color: var(--tinta-suave); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .pendientes { grid-template-columns: minmax(0, 1fr); } }
/* Teléfono: todo a lo alto y las descripciones enteras (en dos renglones si hace falta), nada cortado con "…". */
@media (max-width: 700px) {
    .pendientes { gap: 6px; }
    .pendientes__proveedores, .pendientes__renglones { max-height: none; min-height: 0; }
    .pendientes .precios__tabla td.precios__descripcion { white-space: normal; max-width: none; width: auto; overflow-wrap: anywhere; }
    .pendientes .precios__tabla td, .pendientes .precios__tabla th { padding-left: 4px; padding-right: 4px; }
}

/* Hoja de los precios nuevos (/precios/cambio/imprimir): A4 vertical, con las clases de la hoja del subdiario. */
@page precios { size: A4; margin: 10mm; }
.hoja-precios { page: precios; width: 190mm; font-family: Arial, sans-serif; font-size: 8pt; color: #000; }
.hoja-precios .hoja-subdiario__items td.hoja-precios__descripcion { white-space: normal; }
.hoja-precios .hoja-subdiario__items tfoot td { font-weight: 400; }
@media print { .hoja-precios { width: auto; } }

/* ---------- Acerca de (acercadeph) ---------- */
.acerca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; max-width: 1100px; }
.acerca__marca { display: flex; flex-direction: column; align-items: center; padding: 28px 24px 20px; }
.acerca__logo { width: 100%; max-width: 380px; height: auto; }
.acerca__sistema { margin: 14px 0 18px; color: var(--tinta-suave); font-weight: 600; letter-spacing: 0.03em; }
.acerca__version, .acerca__contacto { margin: 0; width: 100%; max-width: 380px; }
.acerca__version > div, .acerca__contacto > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0;
    border-bottom: 1px solid #EEF2F6; font-size: 0.9rem; }
.acerca__version dt, .acerca__contacto dt { color: var(--tinta-suave); }
.acerca__version dd, .acerca__contacto dd { margin: 0; text-align: right; }
.acerca__contacto a { color: var(--esmalte); }
.acerca__empresa { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.acerca__legal { font-size: 0.8rem; color: var(--tinta-suave); line-height: 1.5; }
@media (max-width: 900px) { .acerca { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cámara del teléfono para leer códigos (escaner.js) ---------- */
.escaner { position: fixed; inset: 0; z-index: 3000; background: #000; display: flex; align-items: center; justify-content: center; }
.escaner__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.escaner__guia { position: relative; width: 82%; max-width: 440px; height: 26vh; max-height: 220px; border: 3px solid rgba(255,255,255,0.9);
    border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45); }
.escaner__texto { position: absolute; top: 14%; left: 0; right: 0; text-align: center; color: #fff; font-size: 1rem; font-weight: 600; }
/* Cámara abierta para varios códigos (Listas): el resultado de la última lectura, verde o rojo. */
.escaner__texto--bien, .escaner__texto--mal { left: 12px; right: 12px; padding: 10px 12px; border-radius: 10px; }
.escaner__texto--bien { background: rgba(46, 125, 79, 0.9); }
.escaner__texto--mal { background: rgba(179, 38, 30, 0.9); }
.escaner__cancelar { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); padding: 12px 32px; border: 0;
    border-radius: 24px; background: #fff; color: var(--tinta); font: inherit; font-size: 1rem; font-weight: 600; }

/* ---------- Configuración (/configuracion) ---------- */
.configuracion { display: flex; flex-direction: column; }
.configuracion__ayuda { padding: 8px 14px; font-size: 0.8rem; color: var(--tinta-suave); border-bottom: 1px solid var(--linea); }
/* Alto fijo con su propio scroll: la página no se alarga (regla de una pantalla en 1366x768). */
.configuracion__texto { height: calc(100vh - 330px); min-height: 220px; width: 100%; resize: none; border: 0; outline: none;
    padding: 10px 14px; background: transparent; color: var(--tinta); tab-size: 2; white-space: pre; overflow: auto;
    font: 0.85rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.configuracion__archivo { width: 290px; }
.configuracion__archivo .mud-input-control { margin-top: 0; }

/* ---------- Etiquetas con código de barras (Argox) ---------- */
/* Muestra aproximada en la ficha: el tamaño real lo da la Argox. */
.argox__muestra { margin-top: 14px; padding: 8px 10px; background: #fff; color: #111; border-radius: 6px;
    border: 1px dashed var(--linea); font-family: monospace; font-size: 0.75rem; line-height: 1.3; }
.argox__texto { font-weight: 600; }
.argox__descripcion { font-size: 0.85rem; transform: scaleY(1.4); transform-origin: top left; margin-bottom: 6px; }
.argox__barras { height: 34px; padding-top: 22px; text-align: center; letter-spacing: 1px;
    background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 5px, #fff 5px 8px) top / 100% 20px no-repeat; }
.argox__codigo { font-size: 1rem; font-weight: 700; letter-spacing: 2px; }
.argox__sin-codigo { color: var(--mud-palette-error); }
.venta__opcion-aviso { color: var(--mud-palette-warning); font-size: 0.8rem; white-space: nowrap; }

/* ---------- Teléfono (hasta 700 px): Facturar, Nota de crédito y Presupuesto ----------
   Versión mínima (pedido de Darth): sin título ni ficha; arriba una fila (cliente / presupuesto), una fila de carga
   (artículo, cantidad, +), los ítems sin encabezado, el cobro en dos filas y abajo, fija, una barra con el total,
   el estado del cobro y el botón. Lo que se maneja con teclas F tiene su botón o ícono en pantalla.
   La regla de "una pantalla sin scroll" es para la notebook: acá, si hay muchos ítems, la página baja. */
.solo-telefono, .solo-telefono-en-linea { display: none; }
@media (max-width: 700px) {
    .solo-escritorio, .venta__teclas, .usuario-actual { display: none !important; }
    .solo-telefono { display: block; }
    .solo-telefono-en-linea { display: inline; }
    .mud-main-content > .mud-container { padding: 6px 6px 0; }
    /* Con letra de menos de 16 px el iPhone agranda la página al tocar un campo. */
    .mud-input input, .mud-input textarea { font-size: 16px; }

    /* Botones con ícono solo */
    .boton-compacto { min-width: 0; padding-left: 10px; padding-right: 10px; }
    .boton-compacto .mud-button-icon-start { margin: 0; }

    /* Encabezado: sin título, las acciones en una fila */
    .encabezado--venta { margin-bottom: 6px; }
    .encabezado--venta .encabezado__texto { display: none; }
    .encabezado--venta .encabezado__acciones { width: 100%; flex-wrap: nowrap; gap: 6px; }
    .encabezado--venta .encabezado__acciones > * { min-width: 0; }
    .facturar__cliente { flex: 1 1 auto; width: auto; }
    /* Facturar: dos filas (descuento y cliente; consumidor final, presupuesto y Cargar). En una sola el cliente y
       "Nº de presupuesto" no entraban (medido a 360 px, 30/10). */
    .encabezado--facturar .encabezado__acciones { flex-wrap: wrap; row-gap: 8px; }
    .encabezado--facturar .encabezado__salto { display: block; flex-basis: 100%; height: 0; }
    .encabezado--facturar .facturar__cliente, .encabezado--facturar .venta__abrir,
    .encabezado--facturar .facturar__cliente ~ .venta__abrir { flex: 1 1 0; width: auto; }
    .venta__abrir { flex: 1 1 auto; width: auto; }
    .facturar__cliente ~ .venta__abrir { flex: 0 0 92px; }
    .facturar__letra { flex: 0 0 64px; width: 64px; }
    .facturar__factura { flex: 1 1 auto; width: auto; }

    /* La ficha no se muestra (el total va en la barra de abajo); solo su aviso, si hay. */
    .edicion { gap: 6px; }
    .edicion > .ficha:not(:has(.ficha__aviso)) { display: none; }
    .edicion > .ficha { position: static; padding: 6px 10px; }
    .edicion > .ficha > :not(.ficha__aviso) { display: none; }
    .edicion > .ficha .ficha__aviso { margin: 0; background: none; padding: 0; }

    /* Carga: artículo, cantidad y + en una fila */
    .venta__carga { flex-wrap: wrap; gap: 6px; padding: 8px; }
    .venta__buscar { flex: 1 1 140px; }
    .venta__cantidad { width: 64px; }
    .venta__camara { flex: none; }
    .venta__precio-varios { width: 100px; flex: none; }
    .venta__carga .venta__precio { display: none; }
    /* Listas que se despliegan (artículos y clientes): a lo ancho de la pantalla y solo lo necesario.
       La de artículos se ubica respecto de toda la fila de carga, no del campo (que en el teléfono es angosto). */
    .venta__carga { position: relative; }
    .venta__carga .venta__buscar { position: static; }
    .venta__carga .venta__opciones { left: 4px; right: 4px; }
    /* La lista se desplaza con el dedo sin arrastrar la página. */
    .venta__opciones { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
    .venta__opcion { touch-action: pan-y; }
    /* Etiquetas: Cargar y el formato en la fila de arriba */
    .encabezado--venta .etiquetas__formato { flex: 1 1 auto; width: auto; }
    .venta__opcion { gap: 8px; padding: 10px 8px; }
    .venta__opcion-codigo, .venta__opcion-stock { display: none; }
    .venta__opcion-nombre { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
    .mud-popover.combo-movil { left: 6px !important; right: 6px; width: calc(100vw - 12px) !important;
        min-width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; }
    .combo-movil .mud-list-item { padding-top: 10px; padding-bottom: 10px; }
    .venta__factura-original .mud-alert { padding: 4px 8px; font-size: 0.85rem; }

    /* Ítems: sin encabezado ni alto fijo; descripción (código y precio debajo), cantidad, importe y quitar */
    .venta__items .mud-table-head { display: none; }
    .venta__items .mud-table-container { height: auto !important; max-height: none !important; }
    /* Más fuerte que ".mud-table-dense * .mud-table-row .mud-table-cell" de MudBlazor (16 + 24 px de margen), que si no
       gana y le come el ancho a la descripción (visto el 30/10 al medir Listas a 360 px). */
    .venta__items.mud-table .mud-table-row .mud-table-cell.mud-table-cell,
    .venta__items.mud-table .mud-table-row .mud-table-cell.mud-table-cell:last-child { padding: 4px 6px; }
    .venta__items .vacio { padding: 14px 4px; font-size: 0.85rem; }

    /* Cliente y descuentos del presupuesto; cobro de la factura */
    .venta__pie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
    .venta__pie .venta__cliente { grid-column: 1 / -1; }
    .cobro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
    .cobro > .cobro__estado { display: none; }

    /* Barra fija de abajo: total y estado a la izquierda, botones a la derecha */
    .barra-acciones { flex-wrap: nowrap; gap: 6px; margin-top: 6px; padding: 6px 0 8px; }
    .barra-acciones > .mud-spacer { display: none; }
    .barra-acciones > .mud-button-root { flex: none; height: 44px; }
    /* El botón de facturar dice "Facturar": en el teléfono va sin ícono, así entra el total (medido a 360 px, 30/10). */
    .barra-acciones > #boton-facturar .mud-button-icon-start { display: none; }
    /* Facturar: descuento y seña (en la PC están en la ficha), en un renglón a lo ancho del cobro. */
    .cobro > .cobro__ajustes { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 2px 12px; font-size: 0.85rem; color: var(--tinta-suave); }
    .cobro__ajustes strong { color: var(--tinta); }
    .barra-acciones .barra__resumen { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
    .barra__resumen-titulo { font-size: 0.75rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .barra__resumen > strong { font-size: 1.25rem; }
    .barra__estado { font-size: 0.8rem; white-space: nowrap; }
    .barra__estado > span { color: var(--tinta-suave); }
    .barra__estado.cobro__estado--restan > span, .barra__estado.cobro__estado--restan > strong { color: var(--mud-palette-error); }
    .barra__estado.cobro__estado--vuelto > span { color: var(--mud-palette-info); }
    .barra__estado.cobro__estado--listo > span { color: var(--mud-palette-success); }

    /* Lista (pedido de Darth, 30/10): el artículo en una fila entera; abajo cámara, "Cantidad 1" y "Alta automática",
       grandes. Renglones: código, descripción corta (entera, en dos líneas si hace falta), cantidad y un menú de acciones. */
    .lista-detalle .venta__buscar { flex: 1 1 100%; }
    .lista-detalle .venta__camara { height: 48px; width: 52px; }
    .lista-detalle .venta__carga > .mud-tooltip-root { flex: 1 1 0; min-width: 0; display: flex; }
    .lista-detalle .lista__opcion.mud-button-root { width: 100%; min-height: 48px; white-space: normal; line-height: 1.15; padding: 0 8px;
        font-size: 0.9rem; font-weight: 600; border-width: 2px; }
    .lista-detalle .lista__opcion .mud-button-icon-start { margin-right: 4px; margin-left: 0; }
    .lista-detalle .lista__codigo { width: 1%; white-space: nowrap; color: var(--tinta-suave); font-size: 0.8rem; }
    .lista-detalle .lista__breve { white-space: normal; overflow-wrap: break-word; }
    .lista-detalle .lista__cantidad { width: 1%; white-space: nowrap; }
    .lista-detalle .venta__items.mud-table .mud-table-row .mud-table-cell.lista__cantidad { padding-left: 2px; padding-right: 2px; }
    .lista-detalle .lista__acciones { width: 1%; }
    .lista-detalle .venta__items.mud-table .mud-table-row .mud-table-cell.lista__acciones { padding-left: 0; padding-right: 0; }
    /* − cantidad + (pedido de Darth, 30/10). Lo cambiado y sin grabar, en naranja; los entregados sin botones. */
    .lista__pasos { display: inline-flex; align-items: center; gap: 2px; }
    .lista__pasos .lista__paso.mud-icon-button { width: 34px; height: 34px; padding: 0; border-radius: 8px; }
    .lista__pasos--fijo .lista__paso { visibility: hidden; }
    .lista__numero { display: inline-block; min-width: 30px; text-align: center; font-size: 1.1rem; font-weight: 700; }
    .lista__numero--cambiado { color: #D9480F; }
    .barra-acciones > .lista__grabar { flex: none; height: 44px; font-weight: 700; }
}

/* ---------- Fondo de pantalla (/fondo-pantalla; lo pone App.razor o js/fondo.js en el body) ---------- */
/* Encima de la imagen va un velo del gris de fondo (--fondo-velo = aclarado) para que se lean los títulos. */
body.con-fondo {
    background-color: var(--fondo);
    background-image: linear-gradient(rgb(238 242 246 / var(--fondo-velo, 0.6)), rgb(238 242 246 / var(--fondo-velo, 0.6))), var(--fondo-imagen);
    background-size: auto, cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
}
body.con-fondo.fondo--mosaico { background-size: auto, auto; background-position: top left; background-repeat: repeat; }
body.con-fondo .ingreso { background: transparent; }
body.con-fondo:not(.fondo--transluce) .barra-acciones { background: rgb(238 242 246 / 0.88); backdrop-filter: blur(4px); }

/* "El fondo se ve a través de las pantallas": TODO es vidrio esmerilado (--hoja-opacidad = 1 − transparencia; decidido por
   Darth 28/10): hojas, grillas, fichas, barra de arriba, menú, barra de botones, Inicio y login. Lo que se abre encima
   (diálogos, listas desplegables, menús, encabezados fijos) un poco más opaco y más desenfocado, para leerlo.
   Ojo: backdrop-filter encierra a los position: fixed de adentro (por eso no va en .mud-layout ni en el body). */
body.con-fondo.fondo--transluce {
    --vidrio: rgb(255 255 255 / var(--hoja-opacidad, 0.8));
    --vidrio-encima: rgb(255 255 255 / calc(var(--hoja-opacidad, 0.8) + 0.12));
    --vidrio-gris: rgb(246 248 251 / var(--hoja-opacidad, 0.8));
    /* Las rayas y el resaltado de las grillas de MudBlazor eran grises opacos: pasan a tintes transparentes. */
    --mud-palette-table-striped: rgb(29 79 124 / 0.04);
    --mud-palette-table-hover: rgb(29 79 124 / 0.08);
}
body.con-fondo.fondo--transluce .hoja:not(.subdiario__total--general),
body.con-fondo.fondo--transluce .mud-paper:not(.mud-popover):not(.mud-dialog):not(.mud-snackbar),
body.con-fondo.fondo--transluce .mud-table,
body.con-fondo.fondo--transluce .ingreso__tarjeta,
body.con-fondo.fondo--transluce .mud-appbar,
body.con-fondo.fondo--transluce .mud-drawer {
    background: var(--vidrio); backdrop-filter: blur(10px); }
body.con-fondo.fondo--transluce .barra-acciones { background: var(--vidrio); backdrop-filter: blur(10px); }
body.con-fondo.fondo--transluce .mud-dialog,
body.con-fondo.fondo--transluce .mud-popover,
body.con-fondo.fondo--transluce .venta__opciones {
    background: var(--vidrio-encima); backdrop-filter: blur(18px); }
body.con-fondo.fondo--transluce .mud-table-head .mud-table-cell,
body.con-fondo.fondo--transluce .presupuestos__tabla th { background: var(--vidrio-gris); backdrop-filter: blur(10px); }
body.con-fondo.fondo--transluce .precios__tabla th { background: var(--vidrio-gris); backdrop-filter: blur(10px); }
body.con-fondo.fondo--transluce .mud-table-container,
body.con-fondo.fondo--transluce .mud-drawer-content,
body.con-fondo.fondo--transluce .mud-table-row,
body.con-fondo.fondo--transluce .mud-dialog-content { background: transparent; }
body.con-fondo.fondo--transluce .ficha,
body.con-fondo.fondo--transluce .subdiario__total--general {
    background: color-mix(in srgb, var(--esmalte) calc(var(--hoja-opacidad, 0.8) * 100%), transparent); backdrop-filter: blur(10px); }
body.con-fondo.fondo--transluce .edicion--nota-credito .ficha {
    background: color-mix(in srgb, #2E7D4F calc(var(--hoja-opacidad, 0.8) * 100%), transparent); }

.fondo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .fondo { grid-template-columns: minmax(0, 1fr); } }
.fondo__panel { padding: 12px 16px; }
.fondo__subtitulo { margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; color: var(--tinta); }
.fondo__ajustes { margin-top: 6px; }
.fondo__ajustes .mud-slider { margin-bottom: 0; }
.fondo__transluce { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--linea); }
.fondo__transluce .mud-switch { margin: 0; }
.fondo__ayuda { margin: 8px 0 0; font-size: 0.8rem; color: var(--tinta-suave); }
.fondo__titulo-galeria { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.fondo__titulo-galeria .fondo__subtitulo { margin: 0; }
.fondo__titulo-galeria .mud-file-upload { margin: 0; }
/* Imagen elegida, antes de subirla */
.fondo__nueva { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 8px; border-radius: 6px;
    border: 2px dashed var(--esmalte); background: rgb(29 79 124 / 0.05); }
.fondo__nueva img { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex: none; }
.fondo__nueva-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.8rem; color: var(--tinta-suave); }
.fondo__nueva-texto b { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fondo__nueva-botones { display: flex; gap: 4px; flex: none; }
@media (max-width: 700px) {
    .fondo__nueva { flex-wrap: wrap; }
    .fondo__nueva-texto b { white-space: normal; overflow-wrap: anywhere; }
    .fondo__nueva-botones { width: 100%; justify-content: flex-end; }
}

/* Vista previa: el sistema en chico sobre la imagen elegida. */
.fondo__vista { aspect-ratio: 16 / 9; max-height: 220px; width: 100%; border: 1px solid var(--linea); border-radius: 6px;
    overflow: hidden; display: flex; flex-direction: column; background-color: var(--fondo);
    background-image: linear-gradient(rgb(238 242 246 / var(--vista-velo, 0)), rgb(238 242 246 / var(--vista-velo, 0))), var(--vista-imagen, none);
    background-size: auto, cover; background-position: center; background-repeat: no-repeat; }
.fondo__vista--mosaico { background-size: auto, 90px auto; background-position: top left; background-repeat: repeat; }
.fondo__vista-barra { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; flex: none;
    background: #fff; border-bottom: 2px solid var(--esmalte); font-size: 0.7rem; font-weight: 700; color: var(--esmalte); }
.fondo__vista-barra img { width: 16px; height: 16px; }
.fondo__vista-cuerpo { flex: 1; display: flex; min-height: 0; }
.fondo__vista-menu { width: 22%; background: #F7F9FB; border-right: 1px solid var(--linea); padding: 8px 6px; display: grid; gap: 6px; align-content: start; }
.fondo__vista-menu i { display: block; height: 5px; border-radius: 3px; background: #CBD5DF; }
.fondo__vista-pagina { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.fondo__vista-titulo { font-size: 0.75rem; font-weight: 700; color: var(--tinta); }
.fondo__vista-hoja { flex: 1; background: #fff; border: 1px solid var(--linea); border-radius: 4px; padding: 8px; display: grid; gap: 7px; align-content: start; }
.fondo__vista--transluce .fondo__vista-hoja,
.fondo__vista--transluce .fondo__vista-barra,
.fondo__vista--transluce .fondo__vista-menu { background: rgb(255 255 255 / var(--vista-opacidad, 0.8)); backdrop-filter: blur(4px); }
.fondo__vista-hoja i { display: block; height: 6px; border-radius: 3px; background: #E4E9EF; }
.fondo__vista-hoja i:nth-child(odd) { width: 70%; }
.fondo__vista-botones { display: flex; gap: 6px; }
.fondo__vista-botones b { width: 38px; height: 10px; border-radius: 3px; background: var(--esmalte); }
.fondo__vista-botones b + b { background: transparent; border: 1px solid var(--esmalte); }

/* Galería: si hay muchas imágenes se desplaza adentro (la pantalla no crece). */
.fondo__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px;
    max-height: calc(100vh - 380px); min-height: 90px; overflow-y: auto; padding: 2px; }
.fondo__miniatura { position: relative; aspect-ratio: 16 / 9; padding: 0; border: 2px solid var(--linea); border-radius: 6px;
    overflow: hidden; background: var(--fondo); cursor: pointer; font: inherit; }
.fondo__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fondo__miniatura:hover { border-color: var(--esmalte); }
.fondo__miniatura:focus-visible { outline: 2px solid var(--esmalte); outline-offset: 2px; }
.fondo__miniatura--elegida { border-color: var(--esmalte); box-shadow: 0 0 0 2px var(--esmalte); }
.fondo__miniatura--ninguna { display: grid; place-items: center; font-size: 0.8rem; color: var(--tinta-suave); }
.fondo__en-uso { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 3px; font-size: 0.7rem;
    font-weight: 600; background: var(--etiqueta); color: var(--etiqueta-tinta); }

/* Licencia de uso (/licencia). En el teléfono, cada campo en su renglón (nada cortado). */
.licencia__codigo, .licencia__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.licencia__codigo input { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.licencia__gf { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed #D8E0E8; }
.licencia__generado { padding: 6px 10px; border-radius: 6px; background: #FFF6CC; border: 1px solid #F5C842;
    font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; font-weight: 700; user-select: all; overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .licencia__codigo, .licencia__fila { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Estadísticas de venta (/estadisticas, Darth 13/11/2026). Todo en cantidades. ---------- */
.estadisticas__filtros { display: grid; grid-template-columns: 160px 160px 260px auto; gap: 12px; align-items: center; }
.estadisticas__filtros .mud-input-control { margin-top: 0; }
.estadisticas__atajos { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.estadisticas__comparado { margin: 0 0 8px; color: var(--tinta-suave); font-size: 0.85rem; }
.estadisticas__tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.estadisticas__tarjeta { display: flex; flex-direction: column; padding: 8px 14px; }
.estadisticas__tarjeta > span { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); }
.estadisticas__tarjeta > strong { font-size: 1.35rem; line-height: 1.3; }
.estadisticas__tarjeta > small { color: var(--tinta-suave); font-size: 0.78rem; }
.estadisticas__tarjeta--principal { border-left: 4px solid var(--esmalte); }
.estadisticas__panel { padding: 12px 16px; height: 100%; }
.estadisticas__titulo { font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; }
.estadisticas__cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.estadisticas__opciones { display: grid; grid-template-columns: 180px 160px; gap: 12px; margin-bottom: 8px; }
.estadisticas__opciones .mud-input-control { margin-top: 0; }
.estadisticas__nota { margin: 6px 0 0; color: var(--tinta-suave); font-size: 0.78rem; }
.estadisticas__leyenda { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.estadisticas__leyenda td { padding: 3px 6px; border-bottom: 1px solid #EEF2F6; vertical-align: middle; }
.estadisticas__leyenda td:first-child { width: 18px; padding-left: 0; }
.estadisticas__leyenda .num { text-align: right; white-space: nowrap; }
.estadisticas__muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
/* Variación contra el período comparado: siempre con flecha y número, el color no es lo único que la dice. */
.variacion { font-size: 0.78rem; white-space: nowrap; color: var(--tinta-suave); }
.variacion--sube { color: #1B7F3B; }
.variacion--baja { color: #B3261E; }
/* Ranking con barras horizontales (artículos y proveedores): nombre entero (en dos renglones si hace falta), barra y valores. */
.ranking { list-style: none; margin: 0; padding: 0; counter-reset: puesto; }
.ranking__fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 1.3fr) auto; gap: 10px; align-items: center;
    padding: 4px 0; border-bottom: 1px solid #EEF2F6; counter-increment: puesto; font-size: 0.85rem; }
.ranking__nombre { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ranking__nombre > span::before { content: counter(puesto) ". "; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.ranking__nombre > small { color: var(--tinta-suave); font-size: 0.75rem; }
.ranking__barra { height: 10px; background: #EEF2F6; border-radius: 0 4px 4px 0; }
.ranking__barra > span { display: block; height: 100%; min-width: 2px; background: #2a78d6; border-radius: 0 4px 4px 0; }
.ranking__valores { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; line-height: 1.25; }
.ranking__valores > small { color: var(--tinta-suave); font-size: 0.75rem; }
/* Teléfono: filtros uno por fila (nada cortado) y en el ranking la barra va debajo del nombre. */
@media (max-width: 700px) {
    .estadisticas__filtros, .estadisticas__opciones { grid-template-columns: minmax(0, 1fr); }
    .estadisticas__atajos { justify-content: flex-start; }
    .estadisticas__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .estadisticas__tarjeta { padding: 6px 10px; }
    .ranking__fila { grid-template-columns: minmax(0, 1fr) auto; }
    .ranking__barra { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Diálogo "procesando" (Shared/ProcesandoDialogo.razor, Darth 13/11/2026) ---------- */
.procesando__cuerpo { display: flex; align-items: center; gap: 18px; padding: 8px 0 4px; }
.procesando__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.procesando__texto > span { font-weight: 600; }
.procesando__texto > small { color: var(--tinta-suave); font-size: 0.85rem; }