/* Estilos propios. Todo lo demas viene del tema de MudBlazor (ver TemaAdsPos). */

html, body {
    margin: 0;
    min-height: 100%;
    /* La familia de fuentes la fija el tema para no depender de Google Fonts:
       una caja de punto de venta puede no tener salida a internet. */
}

/* Densidad: el punto de venta y las pantallas de captura muestran muchas filas,
   y el sistema original usaba rejillas muy compactas. */
.mud-table-dense td,
.mud-table-dense th {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Importes siempre alineados a la derecha y con cifras de ancho fijo, para que las
   columnas de dinero se puedan comparar de un vistazo. */
.importe {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Un modulo que todavia se opera desde el sistema de escritorio. */
.mud-nav-link.mud-nav-link-disabled {
    opacity: .45;
    font-style: italic;
}

/* --- Pantallas de acceso --------------------------------------------------- */

.acceso-fondo {
    min-height: 100vh;
    position: fixed;
    inset: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--mud-palette-background-gray, #f2f0f1);
}

.acceso-tarjeta {
    width: 100%;
    max-width: 24rem;
}

.sucursal-opcion {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    box-sizing: border-box;
    padding: .75rem .9rem;
    margin-bottom: .5rem;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}

.sucursal-opcion:hover {
    background: var(--mud-palette-action-default-hover);
}

.sucursal-opcion:has(input:checked) {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.sucursal-datos {
    display: flex;
    flex-direction: column;
}

.sucursal-nombre {
    font-size: .9375rem;
}

.sucursal-serie {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* Campos de las pantallas de acceso. Son inputs nativos, no componentes de MudBlazor,
   porque esas pantallas son estaticas: necesitan un POST real del navegador para poder
   emitir la cookie de sesion, y los componentes de Mud no devuelven su valor en ese envio.
   Se les da el aspecto del tema a mano para que no desentonen. */

.campo-acceso {
    margin-bottom: 1.25rem;
}

.campo-acceso label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.campo-acceso input {
    width: 100%;
    box-sizing: border-box;
    padding: .75rem .9rem;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    outline: none;
}

.campo-acceso input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.campo-acceso .validation-message {
    display: block;
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--mud-palette-error);
}

.boton-acceso {
    width: 100%;
    padding: .85rem 1rem;
    font: inherit;
    font-weight: 500;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border: none;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

.boton-acceso:hover {
    background: var(--mud-palette-primary-darken);
}

/* --- Pantalla de permisos --------------------------------------------------- */

.rejilla-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0 .5rem;
}

/* El codigo de opcion ('F08') se muestra junto al nombre porque es el vocabulario que
   usa quien administra el sistema desde hace anos, y el que aparece en OpcionesUsuario. */
.codigo-opcion {
    margin-left: .4rem;
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-disabled);
}

/* Una pantalla que todavia se opera desde el sistema de escritorio. */
.opcion-no-migrada {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* Marca las opciones a las que el usuario ha entrado gracias al acceso abierto. */
.punto-auditada {
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-left: .35rem;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--mud-palette-warning);
}

.usuario-activo {
    background: var(--mud-palette-primary-hover);
    border-left: 3px solid var(--mud-palette-primary);
}

.aviso-emparejada {
    color: var(--mud-palette-warning);
}

.boton-secundario {
    padding: .6rem 1rem;
    font: inherit;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

.boton-secundario:hover {
    background: var(--mud-palette-action-default-hover);
}

/* --- Deteccion del agente de impresion -------------------------------------- */

.aviso-agente {
    max-width: 36rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    font-size: .8125rem;
    border-radius: var(--mud-default-borderradius);
}

.aviso-agente-ok {
    color: var(--mud-palette-success-text);
    background: var(--mud-palette-success-hover);
    border: 1px solid var(--mud-palette-success);
}

.aviso-agente-ausente {
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning-hover);
    border: 1px solid var(--mud-palette-warning);
}

.sucursal-opcion-sugerida {
    border-color: var(--mud-palette-success);
}

/*
    Un <button> dentro de un menu de MudBlazor.

    Hace falta porque MudMenuItem se renderiza como <div> y un div no envia un formulario;
    el cierre de sesion tiene que ser un POST. El boton lleva las clases de Mud para heredar
    su apariencia, y aqui solo se neutraliza lo que el navegador le pone de fabrica.
*/
.boton-menu {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

/*
    Fila de catalogo dada de baja.

    Estas pantallas no tienen boton de eliminar -- igual que en el sistema de escritorio, donde
    MToolBar llevaba BEliminarVisible = false -- asi que la baja es la casilla Activo. Si una
    fila inactiva se viera igual que las demas, el unico boton de baja del sistema no tendria
    efecto visible.
*/
.fila-inactiva td {
    opacity: 0.45;
    text-decoration: line-through;
}

/* El icono de la ultima columna ya dice que esta inactiva: tacharlo seria redundante. */
.fila-inactiva td:last-child {
    text-decoration: none;
}

/*
    Renglon de totales dentro de la rejilla.

    No es un pie de tabla: F17_Datos devuelve los totales como una fila mas del conjunto, y se
    conserva asi para que el reporte de la web sume por el mismo camino que el del escritorio.
    Esto es lo que impide que esa fila se lea como un movimiento mas.
*/
.fila-total td {
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-background-grey);
}

/* --- Productos ----------------------------------------------------------- */

/*
    Miniatura de la rejilla. Tamano fijo para que las filas no bailen de altura segun la
    proporcion de cada foto, y object-fit: cover para recortar en lugar de deformar.
*/
.miniatura-producto {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.miniatura-vacia,
.foto-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-disabled);
}

.foto-producto {
    width: 100%;
    max-width: 14rem;
    aspect-ratio: 1;
    border-radius: 6px;
    object-fit: contain;
    background: var(--mud-palette-background-grey);
}

/* El campo de archivo nativo existe para que JavaScript alcance el archivo elegido; quien
   se ve es el boton de MudBlazor que lo dispara. */
.campo-archivo-oculto {
    display: none;
}

/* Un precio con cambio sin guardar. Con treinta filas de lista por tipo, saber cuales se
   tocaron antes de guardar evita sustos. */
.precio-cambiado td {
    background: var(--mud-palette-warning-hover);
}

/* El codigo de barras se lee mejor en una tipografia de ancho fijo: son digitos largos que
   a menudo se comparan a ojo contra la etiqueta impresa. */
.texto-codigo {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.8125rem;
}

.miniatura-ficha {
    width: 4rem;
    height: 4rem;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Una matriz de tallas por sucursales crece a lo ancho sin limite. Solo esta tabla se
   desplaza; el cuerpo de la pagina nunca lo hace. */
.tabla-ancha {
    overflow-x: auto;
}

/* ------------------------------------------------------------------------- */
/* Anchos de campo dentro de una fila flexible                                */
/* ------------------------------------------------------------------------- */
/*
    El ancho se le pone a un ENVOLTORIO y nunca al componente de MudBlazor.

    Razon concreta: MudBlazor pasa su parametro Style al <input> interno, no a la raiz, y ese
    input vive dentro de un contenedor flex en COLUMNA. Un 'flex: 1 1 12rem' escrito ahi se
    interpreta como base de 12rem de ALTO, y el campo sale de 192 pixeles de alto en lugar de
    40. Pasa con el selector de fecha, el numerico y el desplegable por igual, y el sintoma --
    una caja enorme con el valor abajo -- no se parece en nada a la causa.
*/
.campo {
    /* Sin esto, un campo largo no se deja encoger y desborda la fila. */
    min-width: 0;
}

.campo-xs { flex: 0 0 7rem; }
.campo-sm { flex: 0 0 9rem; }
.campo-md { flex: 0 1 12rem; }
.campo-lg { flex: 1 1 14rem; }
.campo-xl { flex: 1 1 18rem; min-width: 14rem; }

/* --- Marca de la empresa, y la nuestra ------------------------------------ */

/*
    El logotipo en la barra superior. Alto fijo y ancho libre: un logotipo puede ser cuadrado o
    una firma muy alargada, y lo unico que la barra puede garantizar es el alto.
*/
.logotipo-barra {
    height: 1.75rem;
    max-width: 10rem;
    object-fit: contain;
    display: block;
}

/*
    El nombre del cliente, al lado. Una razon social puede traer cuarenta caracteres y la barra
    tambien lleva los botones de la derecha, asi que se recorta aqui en lugar de empujarlos
    fuera de la pantalla.
*/
.nombre-barra {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 18rem;
}

/* El logotipo de la pantalla de acceso y de /acerca, sea el del cliente o el nuestro. */
.logotipo-acceso {
    height: 4rem;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/*
    Esta clase la usaban los componentes de logotipo de empresa y de sucursal desde que se
    escribieron, y no existia en ninguna hoja: el <img> salia sin dimensionar y el marcador de
    "sin logotipo" sin alto. Es la misma forma que .foto-producto pero sin forzar un cuadrado,
    porque un logotipo casi nunca lo es.
*/
.logotipo-entidad {
    width: 100%;
    max-width: 14rem;
    height: 6rem;
    border-radius: 6px;
    object-fit: contain;
    background: var(--mud-palette-background-grey);
}

/* Nuestra marca al pie del cajon del menu. El cajon se vuelve una columna flexible para que
   margin-top: auto empuje el pie hasta abajo cuando el menu no llena el alto. */
.mud-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
}

.pie-marca {
    margin-top: auto;
    flex-shrink: 0;
}

.pie-acceso {
    text-align: center;
}

/*
    La vista previa del color en la pantalla de Empresa. El color va en un atributo de estilo en
    linea porque es un dato, no una regla: antes de llegar aqui pasa por el patron de seis
    digitos hexadecimales.
*/
.muestra-marca {
    display: flex;
    align-items: center;
    padding: .6rem .9rem;
    border-radius: var(--mud-default-borderradius);
    font-weight: 500;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    min-height: 2.75rem;
}

/* --- Plantillas de ticket ------------------------------------------------- */

/*
    El editor es codigo: paso fijo, para que lo que se alinea en la plantilla se vea alineado.

    El selector es largo porque MudBlazor fuerza 'font-family: inherit' con
    '.mud-input > textarea.mud-input-root', que pesa mas que un '.clase textarea'. Ganarle por
    orden de hoja funcionaria hoy y se romperia el dia que cambie el orden de las etiquetas.
*/
.editor-plantilla .mud-input > textarea.mud-input-root {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.8125rem;
    line-height: 1.35;
}

/*
    La vista previa imita el rollo: paso fijo y sin ajuste de linea, porque lo que se esta
    comprobando es justamente si el ticket cabe en el ancho de la impresora. Si se desborda, se
    desplaza, que es mas honesto que doblarlo y hacer creer que cabe.
*/
.vista-ticket {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.75rem;
    line-height: 1.25;
    white-space: pre;
    overflow-x: auto;
    margin: 0;
    padding: .75rem;
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
}

.campos-plantilla {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    max-height: 18rem;
    overflow-y: auto;
}

.campos-plantilla code,
.ayuda-plantilla code {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: .75rem;
    padding: .1rem .35rem;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

.ayuda-plantilla td {
    padding: .2rem .4rem;
}

/* --- El punto de venta en una pantalla chica ------------------------------ */

/*
    Las primeras consultas de medios del proyecto, y van aqui por una razon concreta: el punto de
    venta tiene que poder usarse en un telefono, que es uno de los requisitos de la migracion a
    web. El resto de las pantallas se defiende con la rejilla de MudBlazor.

    El punto de corte es el de MudBlazor (md = 960px) para que el CSS y los MudHidden de la
    pantalla no discrepen: si uno oculta la cuadricula y el otro todavia no muestra la lista, el
    carrito desaparece.
*/

.lista-carrito-dato {
    min-width: 0;
}

/* Sin esto, una descripcion larga empuja el importe fuera del renglon. */
.lista-carrito .mud-list-item-text {
    min-width: 0;
}

.barra-cobro {
    display: none;
}

@media (max-width: 959.98px) {
    /*
        El total y el cobro, fijos abajo. En un telefono el boton Cobrar queda si no debajo de
        toda la lista de articulos, que es donde nadie lo encuentra con el cliente enfrente.
    */
    .barra-cobro {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .5rem .9rem;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-divider);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .14);
    }

    .barra-cobro-total {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    /* Hueco para que la barra no tape la ultima partida ni el ultimo boton. */
    .pos-con-barra {
        padding-bottom: 4.75rem;
    }

    /*
        El cobro, un campo por renglon.

        La fila de pago son forma, importe y referencia uno al lado del otro: 37rem de bases
        flexibles que en 375 pixeles salen de la pantalla. Se envuelve aqui y no con la utilidad
        flex-wrap, porque en escritorio la fila SI cabe encogiendo y envolverla alli cambiaria
        una pantalla que hoy esta bien.
    */
    .fila-pago {
        flex-wrap: wrap;
    }

    .fila-pago .campo {
        flex: 1 1 100%;
    }
}