/* Tema del clon: ROSADO OSCURO. * * Mantiene la estructura, las medidas y el contraste del "Office365Dark" que * usa el original, pero con una paleta ciruela/rosa para poder distinguir de un * vistazo esta aplicacion del sistema ASP.NET cuando ambos estan abiertos. * * Todo el color sale de estos tokens: cambiando el bloque :root se cambia el * tema entero. */ :root{ /* superficies, de la mas clara a la mas oscura */ --fondo:#241019; /* fondo de pagina (era #222) */ --panel:#1c0c14; /* barras, pies, tarjetas (era #191919) */ --barra:#1c0b13; /* barra de menu superior (era #1b1b1b) */ --barra-activa:#3a1826; --fondo-fila:#180a10; /* filas de la grilla (era #000) */ --fondo-fila-alt:#1f0e16; --campo:#150910; /* interior de los editores */ /* controles */ --control:#3a1c2a; --control-borde:#562c3d; --menu:#3a1c2a; /* desplegables y popups */ /* texto y lineas */ --texto:#fbe9f1; --texto-tenue:#b58ba0; --linea:#4a2634; --linea-fina:#2a1119; /* acento */ --acento:#ff5c99; --acento-texto:#1a0a11; /* texto legible sobre el acento */ --acento-suave:#4a1b30; /* celda con edicion pendiente */ /* Importe sobre la barra de sumatoria. En --acento se perdia con el fondo: rosa sobre rosa oscuro es la misma familia de tono y da 4.9:1. En blanco sube a 12:1 y la cifra, que es lo que se va a leer, salta a la vista. */ --cifra-total:#ffffff; /* Nombre del total (PIEZAS, PESO, TOTAL COMPRA...). En --texto-tenue quedaba 10px y rosa apagado sobre el panel: se leia como una marca de agua. Cerca del blanco da ~12:1 y se lee igual que la cifra. */ --etiqueta-total:#f6e6ee; --seleccion:#74234d; /* fila seleccionada */ /* semanticos (se mantienen para que el significado no cambie) */ --ok:#2fa84f; --aviso:#e0a32f; --error:#e04b4b; /* La pieza que va SIN cabeza (columna Cabeza de GANADO). Ambar, fuera de la familia rosa del tema, para que salte en una pantalla que es rosa entera; el texto oscuro encima da 9:1 de contraste. */ --sin-cabeza:#f4c04a; --sin-cabeza-texto:#2a1608; --sin-cabeza-marca:#8a5a00; /* GANADO: sombreado de la fila segun la liquidacion de venta. */ --sombra-enviado:#143a6e; --sombra-enviado-texto:#e8f0ff; --sombra-saldo:#6eb3e0; --sombra-saldo-texto:#0a1a28; --sombra-sin-cobro:#a32d3a; --sombra-sin-cobro-texto:#fff0f2; --sombra-cobrado:#d9b441; --sombra-cobrado-texto:#1a1408; --sombra-facturado:#1a6b44; --sombra-facturado-texto:#e8fff4; --sombra-iniciales:#0a0a0a; --sombra-iniciales-texto:#f0f0f0; /* Sin cliente, o sin nada que mostrar en Iniciales: fila blanca. */ --sombra-sin-iniciales:#ffffff; --sombra-sin-iniciales-texto:#111111; /* GANADO: fila marcada o enfocada. Violeta: no se parece a ninguno de los colores de estado (azules, rojo, dorado, verde, negro, amarillo). */ --seleccion-ganado:#7c3aed; --seleccion-ganado-texto:#ffffff; --seleccion-ganado-borde:#d8c4ff; } *{box-sizing:border-box} [hidden]{display:none !important} /* La pagina no se desplaza: lo hace la rejilla por dentro. Antes .pantalla media calc(100vh - 58px), un alto fijo que suponia que encima solo estaba la barra de menu. Con la ventana algo baja, o con una banda extra arriba (la de "AMBIENTE DE PRUEBAS", por ejemplo), la pantalla se pasaba del alto disponible y la barra inferior -Vista Previa, Guardar, Cancelar- se iba por debajo del borde. Ahora el alto lo reparte el navegador y nadie tiene que acertar ningun numero. */ html,body{margin:0;padding:0;height:100%} body{display:flex;flex-direction:column} .barra-menu{flex:0 0 auto} /* min-height:0 es lo que deja encoger a un hijo flexible: sin esto su alto minimo es el de su contenido, crece sin limite y el que acaba desplazandose es el documento entero. */ main.contenido{flex:1 1 auto;min-height:0;overflow:auto; display:flex;flex-direction:column} body{ background:var(--fondo); color:var(--texto); font:13px/1.35 "Segoe UI",Tahoma,Geneva,sans-serif; } /* Hojas de impresion / vista previa: no son el tablero. html,body al 100% en columna deja el documento pegado a la izquierda y una barra de desplazamiento a la derecha, como si siguiera main.contenido. .impresion anula ese layout y deja que la hoja ocupe la ventana. */ html.impresion,body.impresion{ height:auto;min-height:100%;display:block;overflow:auto; background:#fff;color:#111; } a{color:inherit;text-decoration:none} button{font:inherit} /* ------------------------------------------------------------------ */ /* Barra de menu superior: Gestion | Ganado | Maestros | Otros */ /* ------------------------------------------------------------------ */ .barra-menu{display:flex;background:var(--barra);border-bottom:1px solid #000} .menu-raiz{ position:relative;display:flex;align-items:center;gap:8px; padding:0 22px;height:42px;cursor:pointer;color:var(--texto); border-right:1px solid #000;white-space:nowrap; } .menu-raiz:hover,.menu-raiz:focus,.menu-raiz.activo{background:var(--barra-activa);color:#fff;outline:none} .menu-icono{width:18px;height:18px;border-radius:3px;display:inline-block} .icono-1{background:linear-gradient(#2fa84f,#1c7a37)} .icono-2{background:linear-gradient(#c78ba0,#8a5c6e)} .icono-3{background: linear-gradient(90deg,#e04b7d 0 50%,#4bb7e0 50% 100%), linear-gradient(90deg,#e0c04b 0 50%,#5ad06a 50% 100%); background-size:100% 50%;background-position:0 0,0 100%;background-repeat:no-repeat} .icono-4{background:linear-gradient(#e0518b,#a8124e)} .chevron{color:var(--texto-tenue);font-size:11px} .submenu{ display:none;position:absolute;top:42px;left:0;min-width:200px;z-index:60; background:var(--menu);border:1px solid #000;box-shadow:0 6px 18px rgba(0,0,0,.6); } .menu-raiz:hover .submenu,.menu-raiz:focus-within .submenu{display:block} .submenu a{display:block;padding:9px 16px;color:var(--texto)} .submenu a:hover{background:var(--acento);color:var(--acento-texto)} .menu-usuario{margin-left:auto;padding:0 18px;display:flex;align-items:center;color:var(--texto-tenue)} .contenido{padding:8px} /* ------------------------------------------------------------------ */ /* Login */ /* ------------------------------------------------------------------ */ body.tema-login{ background:linear-gradient(160deg,#3d1729 0%,#2a1019 60%,#1c0b13 100%); min-height:100vh; display:flex;align-items:flex-start;justify-content:center; } /* La pantalla de acceso no lleva barra de menu, igual que en el original. */ body.tema-login .barra-menu{display:none} .caja-login{ width:min(380px,92vw);margin-top:14px;background:#43182f;border:1px solid #5c2340; border-radius:6px;padding:24px;box-shadow:0 6px 22px rgba(0,0,0,.45); } .avatar-login{width:82px;height:82px;border-radius:50%;background:var(--acento); margin:0 auto 18px;display:flex;align-items:center;justify-content:center; font-size:44px;color:var(--acento-texto)} .caja-login label{display:block;color:#f4d3e2;font-size:20px;margin-bottom:6px} .caja-login input[type=text],.caja-login input[type=password]{ width:100%;height:62px;font-size:30px;padding:0 8px;border:none;border-radius:10px; background:#fdf3f7;color:#2a1019; } .fila-pass{display:flex} .fila-pass input{border-radius:10px 0 0 10px !important;flex:1} .ver-pass{width:56px;border:none;border-radius:0 10px 10px 0;background:var(--acento); color:var(--acento-texto);font-size:22px;cursor:pointer} .fila-recordar{display:flex;align-items:center;justify-content:flex-end;gap:8px; margin:14px 0;color:#f4d3e2} .interruptor{position:relative;width:56px;height:26px;background:var(--error); border-radius:14px;cursor:pointer} .interruptor input{display:none} .interruptor .bola{position:absolute;top:3px;left:3px;width:20px;height:20px; border-radius:50%;background:#fff;transition:.2s} .interruptor .etiqueta{position:absolute;right:8px;top:4px;font-size:12px;color:#fff;font-weight:700} .interruptor.si{background:var(--ok)} .interruptor.si .bola{left:33px} .btn-entrar{ display:block;margin:0 auto;background:var(--acento);color:var(--acento-texto); border:none;border-radius:8px;font-size:30px;font-weight:700;padding:8px 26px;cursor:pointer; } .error-login{background:#8e1d3f;color:#fff;padding:8px 10px;border-radius:6px;margin-bottom:12px} /* ------------------------------------------------------------------ */ /* Portada de mosaicos (index.aspx) */ /* ------------------------------------------------------------------ */ /* Los colores de los mosaicos NO se tocan: son datos copiados del original (core/navegacion.py) y las simulaciones los verifican uno a uno. */ .mosaicos{ display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px;padding:6px; } .mosaico{ min-height:150px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:12px;font-weight:700;font-size:15px;text-align:center; padding:14px;border:none;cursor:pointer;letter-spacing:.3px; } .mosaico .glifo{font-size:40px;line-height:1} .mosaico.bloqueado{opacity:.45;cursor:not-allowed} /* ------------------------------------------------------------------ */ /* Grilla (ASPxGridView) */ /* ------------------------------------------------------------------ */ .pantalla{display:flex;flex-direction:column;flex:1 1 auto;min-height:0; position:relative} /* Once acciones no caben en una linea en una pantalla estrecha, y recortar la barra escondia justo los botones del final. Se envuelve. */ .barra-herramientas{ display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px; background:var(--panel);border:1px solid var(--linea);border-bottom:none; position:sticky;top:0;z-index:45; } .tb-btn{ background:var(--control);border:1px solid var(--control-borde);color:var(--texto); border-radius:3px;padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:6px; } .tb-btn:hover{background:var(--acento);color:var(--acento-texto);border-color:var(--acento)} /* NUEVO es el boton que se busca primero al entrar en una pantalla: con el mismo aspecto que "Limpiar Filtros" habia que leer la barra entera para encontrarlo. Va en el color de acento, con el signo mas grande. */ .tb-btn.tb-nuevo{ background:var(--acento);border-color:var(--acento);color:var(--acento-texto); font-weight:700;padding:5px 14px;box-shadow:0 1px 4px rgba(0,0,0,.35); } .tb-btn.tb-nuevo span{font-size:15px;line-height:1} .tb-btn.tb-nuevo:hover{filter:brightness(1.12)} /* Los botones plegables siguen repartiendose como hijos de la barra: el contenedor existe solo para poder esconderlos de una vez. */ .acciones-barra{display:contents} /* La tira de la barra de herramientas: en el monitor no existe a efectos de reparto; en el telefono se desliza de lado (static/css/movil.css). */ .tb-tira{display:contents} /* El interruptor que los devuelve. Se distingue de las acciones -no hace nada a los datos- sin competir con NUEVO. */ .tb-btn.tb-plegar{background:var(--panel);border-color:var(--linea); color:var(--texto-tenue)} .tb-btn.tb-plegar:hover{background:var(--barra-activa);color:var(--texto); border-color:var(--control-borde)} .tb-btn.tb-plegar.plegado{border-color:var(--acento);color:var(--acento)} /* El rango de fechas se pliega entero, con sus dos etiquetas. */ .bloque-fechas{display:flex;align-items:center;gap:14px} .tb-menu{position:relative} .tb-menu .desplegable{ display:none;position:absolute;top:32px;left:0;min-width:170px;z-index:50; background:var(--menu);border:1px solid #000;box-shadow:0 6px 18px rgba(0,0,0,.6); } .tb-menu.abierto .desplegable{display:block} .desplegable button{display:block;width:100%;text-align:left;padding:9px 14px; background:none;border:none;color:var(--texto);cursor:pointer} .desplegable button:hover{background:var(--acento);color:var(--acento-texto)} /* La opcion puesta va marcada con un ✓ y en negrita: al abrir el desplegable se ve de un vistazo por donde esta filtrando. */ .desplegable button.elegido{font-weight:700;color:var(--acento)} .desplegable button.elegido:hover{color:var(--acento-texto)} /* Con catorce especies la lista cabe; si el maestro crece, se desplaza dentro del desplegable en vez de salirse de la pantalla. */ .desplegable.lista-especies{max-height:60vh;overflow-y:auto;white-space:pre} /* Un boton de la barra que esta filtrando se distingue del que no: si no, una grilla filtrada parece una grilla vacia. */ .tb-btn.filtrando,.tb-menu.filtrando > .tb-btn{ background:var(--acento);color:var(--acento-texto);border-color:var(--acento)} .titulo-pantalla{margin-left:auto;font-size:20px;font-weight:700;letter-spacing:2px; padding-right:14px;color:var(--acento)} /* Se envuelve si no cabe: en GANADO los selectores Liquidacion y Cliente no entran en una sola linea en una pantalla estrecha. */ .barra-filtros{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:6px;background:var(--panel); border:1px solid var(--linea);border-top:none;border-bottom:none; } .buscador{background:var(--control);border:1px solid var(--control-borde);color:var(--texto); padding:5px 8px;border-radius:3px;width:220px} .buscador::placeholder{color:var(--texto-tenue)} /* Una tabla filtrada se parece demasiado a una tabla vacia. */ .marca-filtro{color:var(--acento);font-size:12px;font-weight:600; border:1px solid var(--acento);border-radius:10px;padding:2px 10px} .conmutador{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none} .conmutador .pista{width:38px;height:18px;border-radius:9px;background:#6b4354; position:relative;transition:.15s} .conmutador .pista i{position:absolute;top:2px;left:2px;width:14px;height:14px; border-radius:50%;background:#fff;transition:.15s} .conmutador.on .pista{background:var(--acento)} .conmutador.on .pista i{left:22px} /* Selector de tres opciones de GANADO (Liquidacion, Cliente): botones pegados, uno solo elegido, con el color de acento. */ .selector-opciones{display:inline-flex;align-items:center;white-space:nowrap;font-size:12px} .selector-opciones .selector-titulo{color:var(--texto-tenue);margin-right:6px} .selector-opciones button{background:var(--control);border:1px solid var(--control-borde); color:var(--texto);padding:4px 9px;cursor:pointer;font:inherit;line-height:1.2} .selector-opciones button + button{border-left:none} .selector-opciones button:first-of-type{border-radius:3px 0 0 3px} .selector-opciones button:last-of-type{border-radius:0 3px 3px 0} .selector-opciones button:hover{border-color:var(--acento)} .selector-opciones button.elegido{background:var(--acento);color:var(--acento-texto); border-color:var(--acento);font-weight:600} /* Filtro propio de una pantalla dentro de la barra (bloque filtros_extra). */ .filtro-barra{display:flex;align-items:center;gap:6px;color:var(--texto-tenue); font-size:12px;white-space:nowrap} .filtro-barra select,.filtro-barra input[type=date]{ background:var(--control);border:1px solid var(--control-borde); color:var(--texto);padding:5px 8px;border-radius:3px} /* Sin esto el icono del calendario se dibuja negro sobre fondo oscuro y el campo parece no tener calendario. */ .filtro-barra input[type=date]{color-scheme:dark} .filtro-barra input[type=date]:focus{border-color:var(--acento);outline:none} .marco-grilla{flex:1 1 auto;min-height:0;overflow:auto; border:1px solid var(--linea);background:var(--fondo-fila)} /* La barra de desplazamiento del navegador (¬17px, con flechas) es la que mas se ve en esta pantalla -esta siempre ahi, la tabla es mas ancha que el monitor- y competia en tamano con los datos. Mas fina, sigue siendo facil de arrastrar con el raton. */ .marco-grilla::-webkit-scrollbar{height:8px;width:8px} .marco-grilla::-webkit-scrollbar-track{background:var(--fondo-fila)} .marco-grilla::-webkit-scrollbar-thumb{background:var(--linea);border-radius:4px} .marco-grilla::-webkit-scrollbar-thumb:hover{background:var(--texto-tenue)} /* El pie, el paginador y las dos barras no encogen: son lo ultimo que se debe perder de vista. */ .pie-resumen,.barra-paginas,.barra-acciones, .barra-herramientas,.barra-filtros{flex:0 0 auto} /* ``table-layout:fixed``: cada columna mide lo que declara su definicion (Column.width) y no lo que pida el texto mas largo que le toque. Antes un nombre de proveedor largo estiraba su columna y empujaba a las demas fuera de la pantalla, de modo que el ancho de la tabla cambiaba de una pagina a otra. El texto que no cabe se corta con puntos suspensivos y se ve entero al pasar por encima (el JS le pone el title). El ancho total lo escribe el JS con la suma de las columnas (Grid.ajustarAnchoTabla); ``min-width`` es para cuando caben de sobra: asi se reparten la pantalla en vez de dejar un hueco a la derecha. En cuanto alguien arrastra un borde, ``anchos-propios`` quita ese minimo: si no, el navegador volveria a repartir el hueco y estrechar una columna no se notaria. */ table.grilla{border-collapse:collapse;table-layout:fixed;min-width:100%;font-size:12px} table.grilla.anchos-propios{min-width:0} table.grilla th{ position:sticky;top:0;z-index:5;background:var(--fondo);color:#fff;font-weight:600; text-align:left;padding:6px 8px;border:1px solid var(--linea);white-space:nowrap; overflow:hidden;text-overflow:ellipsis; cursor:grab; } table.grilla th .embudo{float:right;color:var(--texto-tenue);margin-left:6px; margin-right:8px;cursor:pointer} table.grilla th .embudo:hover{color:var(--acento)} /* El embudo de una columna que esta filtrando se ve: si no, faltan filas y no hay forma de saber por que. */ table.grilla th .embudo.filtrando{color:var(--acento)} table.grilla th .embudo.filtrando::after{content:"\2022"} table.grilla th.orden-asc::after{content:" ▲";color:var(--acento)} table.grilla th.orden-desc::after{content:" ▼";color:var(--acento)} table.grilla td{ padding:4px 8px;border:1px solid var(--linea-fina);color:var(--texto);white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } table.grilla tbody tr{background:var(--fondo-fila)} table.grilla tbody tr:nth-child(even){background:var(--fondo-fila-alt)} table.grilla tbody tr.seleccionada{background:var(--seleccion)} table.grilla tbody tr.enfocada td{outline:1px solid var(--acento);outline-offset:-1px} table.grilla td.editada{background:var(--acento-suave)} /* Una fila que no se edita (en GANADO, la pieza ya liquidada). Se lee igual de bien -sigue siendo un dato que hay que consultar- pero el cursor y el tono dicen que ahi no se teclea, sin tener que intentarlo para enterarse. */ table.grilla tbody tr.bloqueada > td{ color:var(--texto-tenue); cursor:not-allowed; font-style:italic; } table.grilla tbody tr.bloqueada .casilla-bool{cursor:not-allowed} /* Columnas inmovilizadas ------------------------------------------------- Una tabla de veinte columnas se desplaza de lado, y al hacerlo se puede perder de vista cual es la fila. Las columnas fijas se quedan pegadas a la izquierda, con la casilla de seleccion. El desplazamiento de cada una lo calcula el JS con los anchos reales (Grid.fijarColumnas). background:inherit y no un color fijo: asi la celda se lleva el de su fila -alterna, seleccionada, enfocada- en vez de romper el rayado. */ table.grilla th.fija,table.grilla td.fija{position:sticky} /* La celda se lleva el fondo de su fila -alterna, seleccionada, enfocada- en vez de romper el rayado. En la cabecera no vale heredar: la fila del thead no tiene fondo propio y la celda saldria transparente, dejando ver pasar por debajo lo que se desplaza. */ table.grilla td.fija{background:inherit;z-index:3} table.grilla th.fija{background:var(--fondo);z-index:7} /* Una linea marca donde termina lo que no se mueve. La ultima la senala el JS: el selector que lo haria en CSS (:nth-last-of-type(1 of .fija)) aun no esta en todos los navegadores. */ table.grilla th.ultima-fija,table.grilla td.ultima-fija{ border-right:2px solid var(--linea)} /* La pieza que va SIN cabeza (columna Cabeza de GANADO) se marca en su propia celda: al repasar un romaneo hay que separarlas de un vistazo, porque pesan -y se pagan- distinto. Color propio, no el de "editada", y un borde a la izquierda para que se distinga tambien sin color (impresion, daltonismo). Va detras de las reglas de columna fija a proposito: Pieza es la columna fija de GANADO y ``td.fija{background:inherit}`` tiene la misma especificidad, asi que puesto antes se quedaba con el fondo de su fila y el texto oscuro encima, ilegible. La variante tr.bloqueada hace falta por lo mismo pero con el color: esa regla es ``tr.bloqueada > td{color:...}``, mas especifica que un simple ``td.sin-cabeza``, y sin este empate el texto oscuro pensado para leerse sobre el amarillo salia con el tono apagado de "no se edita" -bajisimo contraste sobre fondo dorado. Una pieza liquidada sigue pudiendo ser S/CABEZA y las dos marcas tienen que convivir legibles. */ table.grilla td.sin-cabeza, table.grilla tbody tr.seleccionada td.sin-cabeza, table.grilla tbody tr.enfocada td.sin-cabeza, table.grilla tbody tr.bloqueada td.sin-cabeza, table.grilla tbody tr[class*="sombra-"] td.sin-cabeza{ background:var(--sin-cabeza); color:var(--sin-cabeza-texto); font-weight:700; box-shadow:inset 3px 0 0 var(--sin-cabeza-marca); } /* GANADO: un color por fila segun la liquidacion de venta. Gana al rayado par/impar y a la seleccion, para que el estado se lea aunque la fila este marcada. El texto de ``bloqueada`` (tenue) se pisa con el de cada color: si no, una pieza LIQUIDADO se leeria apagada sobre rojo o verde. */ table.grilla tbody tr.sombra-enviado, table.grilla tbody tr.sombra-enviado:nth-child(even), table.grilla tbody tr.sombra-enviado.seleccionada{background:var(--sombra-enviado)} table.grilla tbody tr.sombra-enviado > td, table.grilla tbody tr.sombra-enviado.bloqueada > td{color:var(--sombra-enviado-texto)} table.grilla tbody tr.sombra-facturado, table.grilla tbody tr.sombra-facturado:nth-child(even), table.grilla tbody tr.sombra-facturado.seleccionada{background:var(--sombra-facturado)} table.grilla tbody tr.sombra-facturado > td, table.grilla tbody tr.sombra-facturado.bloqueada > td{color:var(--sombra-facturado-texto)} table.grilla tbody tr.sombra-saldo, table.grilla tbody tr.sombra-saldo:nth-child(even), table.grilla tbody tr.sombra-saldo.seleccionada{background:var(--sombra-saldo)} table.grilla tbody tr.sombra-saldo > td, table.grilla tbody tr.sombra-saldo.bloqueada > td{color:var(--sombra-saldo-texto)} table.grilla tbody tr.sombra-cobrado, table.grilla tbody tr.sombra-cobrado:nth-child(even), table.grilla tbody tr.sombra-cobrado.seleccionada{background:var(--sombra-cobrado)} table.grilla tbody tr.sombra-cobrado > td, table.grilla tbody tr.sombra-cobrado.bloqueada > td{color:var(--sombra-cobrado-texto)} table.grilla tbody tr.sombra-sin-cobro, table.grilla tbody tr.sombra-sin-cobro:nth-child(even), table.grilla tbody tr.sombra-sin-cobro.seleccionada{background:var(--sombra-sin-cobro)} table.grilla tbody tr.sombra-sin-cobro > td, table.grilla tbody tr.sombra-sin-cobro.bloqueada > td{color:var(--sombra-sin-cobro-texto)} table.grilla tbody tr.sombra-iniciales, table.grilla tbody tr.sombra-iniciales:nth-child(even), table.grilla tbody tr.sombra-iniciales.seleccionada{background:var(--sombra-iniciales)} table.grilla tbody tr.sombra-iniciales > td, table.grilla tbody tr.sombra-iniciales.bloqueada > td{color:var(--sombra-iniciales-texto)} table.grilla tbody tr.sombra-sin-iniciales, table.grilla tbody tr.sombra-sin-iniciales:nth-child(even), table.grilla tbody tr.sombra-sin-iniciales.seleccionada{background:var(--sombra-sin-iniciales)} table.grilla tbody tr.sombra-sin-iniciales > td, table.grilla tbody tr.sombra-sin-iniciales.bloqueada > td{color:var(--sombra-sin-iniciales-texto)} /* GANADO: la fila marcada (casilla) o enfocada (clic) se pinta de violeta, y aqui SI gana al color de estado. Antes pasaba al reves: casi toda fila con comprador lleva sombra-iniciales, asi que marcar una no cambiaba nada a la vista. El estado no se pierde: queda como franja a la izquierda, en la casilla. La enfocada lleva ademas un borde, para distinguirla de las solo marcadas. */ table.grilla-ganado tbody tr.sombra-enviado{--color-estado:var(--sombra-enviado)} table.grilla-ganado tbody tr.sombra-facturado{--color-estado:var(--sombra-facturado)} table.grilla-ganado tbody tr.sombra-saldo{--color-estado:var(--sombra-saldo)} table.grilla-ganado tbody tr.sombra-cobrado{--color-estado:var(--sombra-cobrado)} table.grilla-ganado tbody tr.sombra-sin-cobro{--color-estado:var(--sombra-sin-cobro)} table.grilla-ganado tbody tr.sombra-iniciales{--color-estado:var(--sombra-iniciales)} table.grilla-ganado tbody tr.sombra-sin-iniciales{--color-estado:var(--sombra-sin-iniciales)} table.grilla-ganado tbody tr.seleccionada, table.grilla-ganado tbody tr.enfocada, table.grilla-ganado tbody tr.seleccionada:nth-child(even), table.grilla-ganado tbody tr.enfocada:nth-child(even), table.grilla-ganado tbody tr[class*="sombra-"].seleccionada, table.grilla-ganado tbody tr[class*="sombra-"].enfocada{background:var(--seleccion-ganado)} table.grilla-ganado tbody tr.seleccionada > td, table.grilla-ganado tbody tr.enfocada > td, table.grilla-ganado tbody tr[class*="sombra-"].seleccionada > td, table.grilla-ganado tbody tr[class*="sombra-"].enfocada > td{color:var(--seleccion-ganado-texto)} table.grilla-ganado tbody tr[class*="sombra-"].seleccionada > td:first-child{ box-shadow:inset 6px 0 0 var(--color-estado)} /* El borde de la enfocada va como sombra interior y no como border: un border mas grueso cambiaria el alto de la fila y la tabla saltaria. */ table.grilla-ganado tbody tr.enfocada > td{ outline:none; box-shadow:inset 0 2px 0 var(--seleccion-ganado-borde), inset 0 -2px 0 var(--seleccion-ganado-borde)} table.grilla-ganado tbody tr[class*="sombra-"].enfocada > td:first-child{ box-shadow:inset 6px 0 0 var(--color-estado), inset 0 2px 0 var(--seleccion-ganado-borde), inset 0 -2px 0 var(--seleccion-ganado-borde)} /* La celda S/CABEZA conserva su amarillo con texto oscuro: el blanco de la fila marcada no se leeria encima. */ table.grilla-ganado tbody tr.seleccionada > td.sin-cabeza, table.grilla-ganado tbody tr.enfocada > td.sin-cabeza, table.grilla-ganado tbody tr[class*="sombra-"].seleccionada > td.sin-cabeza, table.grilla-ganado tbody tr[class*="sombra-"].enfocada > td.sin-cabeza{ color:var(--sin-cabeza-texto)} /* La celda editada lleva fondo rosa oscuro, y el texto tiene que ser claro sea cual sea la fila: el color de estado (#111 en la fila blanca, oscuro en saldo y cobrado) dejaba lo tecleado negro sobre granate, ilegible. Va al final para ganar a las reglas de fila; S/CABEZA conserva su amarillo. */ table.grilla tbody tr > td.editada:not(.sin-cabeza){ background:var(--acento-suave); color:var(--texto)} table.grilla-ganado tbody tr.seleccionada > td.editada:not(.sin-cabeza), table.grilla-ganado tbody tr.enfocada > td.editada:not(.sin-cabeza){ color:var(--seleccion-ganado-texto)} /* Mover una columna arrastrando su cabecera. El borde derecho es otra cosa: cambia el ancho, y el cursor lo dice antes de agarrarlo. */ /* touch-action:none: sin el, el dedo sobre la cabecera desplaza la tabla y el navegador cancela el arrastre; el resto de la tabla se sigue desplazando. */ table.grilla th.arrastrable{cursor:grab;touch-action:none; -webkit-user-select:none;user-select:none} body.moviendo-columna{cursor:grabbing;-webkit-user-select:none;user-select:none} body.moviendo-columna table.grilla th.arrastrable{cursor:grabbing} .asa-redimension{position:absolute;top:0;right:0;bottom:0;width:7px; cursor:col-resize;z-index:6;touch-action:none} .asa-redimension:hover,.asa-redimension.activo{background:var(--acento)} body.redimensionando-columna{cursor:col-resize;user-select:none} table.grilla th.arrastrando{opacity:.45} table.grilla th.destino{box-shadow:inset 3px 0 0 var(--acento)} td.num,th.num{text-align:right} .celda-check{width:34px;text-align:center;cursor:default} .casilla-sel{accent-color:var(--acento)} .casilla-bool{accent-color:var(--acento);cursor:pointer;width:15px;height:15px} .casilla-bool:disabled{cursor:default;opacity:.6} .fila-filtros input{width:100%;background:var(--campo);border:1px solid var(--control-borde); color:var(--texto);padding:3px 5px;font-size:11px} .editor-celda{width:100%;background:var(--campo);border:1px solid var(--acento); color:#fff;padding:2px 4px;font-size:12px} .editor-inline{width:90px;background:var(--campo);border:1px solid var(--control-borde); color:var(--texto);padding:3px 5px;font-size:12px;text-align:right} .editor-inline:focus{border-color:var(--acento);outline:none} /* Una descripcion que se teclea en la fila (CONCEPTOS ADICIONALES, DESCUENTOS): es texto y no una cifra, asi que va a la izquierda y ocupa toda la celda. */ .editor-inline.editor-texto{width:100%;text-align:left} /* Un valor que GUARDAR va a rechazar (p. ej. un Descuento mayor que lo que vale la pieza): se ve antes de pulsarlo. */ .editor-inline.invalido,.editor-inline.invalido:focus{border-color:var(--error); box-shadow:0 0 0 1px var(--error)} /* El precio unitario se pierde entre las demas columnas y es el dato que mas se revisa al liquidar: se resalta para poder recorrerlo de un vistazo. */ .precio{color:var(--acento);font-weight:600} input.precio{color:var(--acento);border-color:var(--acento-suave)} /* Pie de sumatorias: Piezas, Peso, Monto, Cantidad, Total Precio Compra y Total Precio Venta. Antes era un renglon de texto corrido del tamano de una celda mas, en el que la cifra habia que buscarla leyendo. Ahora cada total es un bloque con su nombre encima y el numero grande, pegado debajo de la tabla, que es donde se mira al cerrar el dia. */ .pie-resumen{ display:flex;flex-wrap:wrap;gap:2px;align-items:stretch; padding:0;background:var(--panel);border:1px solid var(--linea);border-top:none; border-bottom:2px solid var(--acento);color:var(--texto);font-size:12px; } .pie-resumen .total{ display:flex;flex-direction:column;justify-content:center;gap:1px; padding:6px 16px;min-width:120px;border-right:1px solid var(--linea-fina); } .pie-resumen .total:last-child{border-right:none} .pie-resumen .total-etiqueta{ color:var(--etiqueta-total);font-size:12px;font-weight:700; letter-spacing:.35px;text-transform:uppercase;white-space:nowrap; } .pie-resumen .total-cifra{ color:var(--cifra-total);font-size:18px;font-weight:800; font-variant-numeric:tabular-nums;white-space:nowrap; } .pie-resumen .total-cuenta{background:var(--fondo)} .pie-resumen .total-cuenta .total-cifra{color:var(--cifra-total);font-size:18px} /* El nombre corto se ve en el telefono y en la tableta, donde "TOTAL PRECIO COMPRA" no cabe en una fila de ocho. En el monitor se lee el rotulo entero. */ .pie-resumen .total-etiqueta-corta{display:none} .barra-paginas{ display:flex;align-items:center;gap:6px;padding:6px;background:var(--panel); border:1px solid var(--linea);border-top:none; } .barra-paginas button{background:var(--control);border:1px solid var(--control-borde); color:var(--texto);min-width:28px;padding:3px 7px;cursor:pointer;border-radius:2px} .barra-paginas button.actual{background:var(--acento);color:var(--acento-texto); border-color:var(--acento)} .barra-acciones{display:flex;justify-content:flex-end;gap:8px;padding:8px; background:var(--panel);border:1px solid var(--linea);border-top:none} /* El resumen y los botones cierran el dia en la misma franja, siempre a la vista. Los totales toman el hueco de la izquierda; Guardar y Cancelar se quedan a la derecha, a la misma altura. */ .barra-acciones.con-resumen{align-items:stretch;padding:0 8px 0 0; border-bottom:2px solid var(--acento)} .barra-acciones.con-resumen .pie-resumen{ flex:1 1 auto;min-width:0;overflow-x:auto;align-items:stretch; border:none;background:transparent} .barra-acciones.con-resumen .pie-resumen .total{ min-width:100px;padding:6px 12px} .barra-acciones.con-resumen .pie-resumen .total-cifra{font-size:18px} .barra-acciones.con-resumen .btn{align-self:center;flex:0 0 auto} .acciones-proceso{ position:sticky;bottom:0;z-index:45;display:flex;justify-content:flex-end; gap:8px;flex-wrap:wrap;padding:10px;margin:8px 0 0; background:var(--panel);border:1px solid var(--linea); box-shadow:0 -6px 18px rgba(0,0,0,.35); } .btn{background:var(--control);border:1px solid var(--control-borde);color:var(--texto); border-radius:3px;padding:6px 16px;cursor:pointer} .btn:hover{background:var(--barra-activa)} .btn-primario{background:var(--acento);border-color:var(--acento); color:var(--acento-texto);font-weight:600} /* Guardar cierra la edicion de la tabla: es la accion de la barra de abajo y tiene que distinguirse de Cancelar sin tener que leer las dos. */ .btn-guardar{background:var(--acento);border-color:var(--acento); color:var(--acento-texto);font-weight:700;font-size:14px; padding:8px 30px;letter-spacing:.4px;box-shadow:0 1px 5px rgba(0,0,0,.4)} .btn-guardar:hover{background:var(--acento);filter:brightness(1.12)} /* Selector de columnas ------------------------------------------------- */ .panel-columnas{position:absolute;z-index:60;top:44px;left:8px;min-width:220px; max-height:60vh;overflow-y:auto;background:var(--menu); border:1px solid var(--control-borde);border-radius:3px; box-shadow:0 8px 24px rgba(0,0,0,.6);padding:6px} .panel-columnas-cabecera{display:flex;align-items:center;justify-content:space-between; gap:10px;padding:4px 6px 8px;border-bottom:1px solid var(--linea)} .panel-columnas-cabecera .btn{padding:3px 8px;font-size:11px} .columna-opcion{display:flex;align-items:center;gap:7px;padding:5px 6px; cursor:pointer;color:var(--texto);white-space:nowrap} .columna-opcion:hover{background:var(--seleccion)} .columna-opcion input{flex:0 0 auto;margin:0} /* Mover la columna sin arrastrar: en un telefono no hay arrastre comodo, y con el teclado tampoco. */ .columna-opcion .mover{margin-left:auto;display:flex;gap:3px;flex:0 0 auto} .columna-opcion .mover button{background:var(--control);color:var(--texto); border:1px solid var(--control-borde);border-radius:3px;cursor:pointer; padding:1px 7px;font-size:12px;line-height:1.3} .columna-opcion .mover button:hover:not(:disabled){background:var(--acento); color:var(--acento-texto);border-color:var(--acento)} .columna-opcion .mover button:disabled{opacity:.3;cursor:default} .columna-opcion.fija{color:var(--texto-tenue)} .columna-opcion .marca-fija{margin-left:auto;font-size:10px; letter-spacing:.5px;text-transform:uppercase;color:var(--acento)} /* Desplegable del embudo de una cabecera -------------------------------- */ /* Antes el embudo era un prompt() en el que habia que acertar el texto de memoria. Ahora despliega lo que hay en esas celdas para marcarlo. Va en coordenadas de ventana (colocarFlotante) porque el marco de la tabla tiene overflow y lo recortaria. */ .panel-valores{ position:fixed;z-index:80;min-width:min(240px,92vw);max-width:min(340px,94vw); background:var(--menu);border:1px solid var(--control-borde);border-radius:3px; box-shadow:0 8px 24px rgba(0,0,0,.6);padding:8px; display:flex;flex-direction:column;gap:6px; } .panel-valores-titulo{color:var(--acento);font-weight:600;letter-spacing:.4px; padding-bottom:4px;border-bottom:1px solid var(--linea)} .buscador-valores{background:var(--campo);border:1px solid var(--control-borde); color:var(--texto);padding:5px 7px;border-radius:2px;width:100%} .buscador-valores:focus{border-color:var(--acento);outline:none} .buscador-valores.contiene{border-style:dashed} .lista-valores{max-height:min(320px,40vh);overflow-y:auto; border:1px solid var(--linea-fina);border-radius:2px} .valor-opcion{display:flex;align-items:center;gap:7px;padding:4px 7px; cursor:pointer;color:var(--texto);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .valor-opcion:hover{background:var(--seleccion)} .valor-opcion input{flex:0 0 auto;margin:0;accent-color:var(--acento)} .valor-opcion.valor-todos{border-bottom:1px solid var(--linea);font-weight:600} .panel-valores-pie{display:flex;justify-content:flex-end;gap:6px} .panel-valores-pie .btn{padding:4px 12px;font-size:12px} /* Popups -------------------------------------------------------------- */ .popup{position:fixed;inset:0;background:rgba(20,6,12,.7);display:flex; align-items:center;justify-content:center;z-index:100} .popup-caja{background:var(--menu);border:1px solid #000; min-width:min(360px,94vw);max-width:90vw; box-shadow:0 10px 40px rgba(0,0,0,.7)} .popup-caja-movimiento{min-width:min(820px,96vw);max-width:min(920px,96vw); max-height:90vh;display:flex;flex-direction:column} .popup-caja-movimiento .popup-cuerpo{overflow:auto} .modo-nuevo .solo-ficha{display:none} .modo-detalle .solo-escritura,.modo-detalle .busca-pieza,.modo-detalle .btn-quitar{display:none} .modo-detalle #mvTablaPiezas th:last-child,.modo-detalle #mvTablaPiezas td:last-child{display:none} .modo-detalle .busca-liquidacion{display:none} .modo-detalle #mvTablaLiquidaciones th:last-child,.modo-detalle #mvTablaLiquidaciones td:last-child{display:none} /* VINCULAR LIQUIDACION: el movimiento se ve como en DETALLE y solo se eligen liquidaciones; las piezas no se tocan. */ .modo-vincular .solo-escritura,.modo-vincular #mvBloquePiezas .busca-pieza, .modo-vincular #mvBloquePiezas .btn-quitar{display:none} .modo-vincular #mvTablaPiezas th:last-child,.modo-vincular #mvTablaPiezas td:last-child{display:none} /* LEER VOUCHER: la foto y, al lado, lo que se leyo de ella. Los campos que la lectura lleno quedan marcados hasta que alguien los toca. */ .nota-voucher{margin:-4px 0 10px 120px} .voucher-vista{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px 120px} .voucher-vista[hidden]{display:none} .voucher-vista img{max-width:220px;max-height:220px;border:1px solid var(--control-borde); flex:0 0 auto} .voucher-lectura{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px; align-items:flex-start} .lectura-voucher{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--linea); border-left:3px solid var(--texto-tenue);border-radius:4px;font-size:12.5px;line-height:1.45; display:flex;flex-direction:column;gap:4px} .lectura-voucher[hidden]{display:none} .lectura-voucher.leido{border-left-color:var(--ok)} .lectura-voucher.error,.lectura-voucher.repetido{border-left-color:var(--aviso)} .lectura-voucher.leyendo .lv-titulo::before{content:"";display:inline-block;width:10px;height:10px; margin-right:6px;border:2px solid var(--texto-tenue);border-top-color:transparent; border-radius:50%;animation:girar-voucher .8s linear infinite;vertical-align:-1px} @keyframes girar-voucher{to{transform:rotate(360deg)}} .lectura-voucher .lv-titulo{font-weight:700} .lectura-voucher .lv-datos{font-weight:600;font-variant-numeric:tabular-nums} .lectura-voucher .lv-nombres,.lectura-voucher .lv-nota{color:var(--texto-tenue)} .lectura-voucher .lv-aviso{color:var(--aviso)} .lectura-voucher .lv-distintos{display:flex;flex-direction:column;gap:4px;align-items:flex-start} .campo .autollenado{border-color:var(--ok) !important;box-shadow:inset 0 0 0 1px var(--ok)} /* En una tarjeta (el voucher del deposito de un CREDITO) los campos van en rejilla: la foto no se alinea con la columna de las etiquetas. */ .nota-voucher.en-tarjeta{margin:0 0 10px} .voucher-vista.en-tarjeta{margin:0 0 4px} .bloque-piezas{margin:14px 0 8px;padding-top:10px;border-top:1px solid var(--linea)} .bloque-piezas .busca-pieza{margin-bottom:10px} .bloque-piezas .busca-pieza input{width:100%;box-sizing:border-box; background:var(--campo);border:1px solid var(--control-borde);color:var(--texto); padding:7px 10px;border-radius:2px;min-height:34px} .bloque-piezas .busca-pieza input:focus{border-color:var(--acento);outline:none} .lista-piezas{min-width:100%} .opcion-pieza{display:grid;grid-template-columns:70px 78px 70px minmax(70px,1fr) minmax(90px,1.3fr) 78px; gap:8px;align-items:baseline;font-variant-numeric:tabular-nums} .opcion-pieza .n{text-align:right} .opcion-pieza .nombre,.opcion-pieza .fecha{color:var(--texto-tenue);font-size:11px} .tabla-piezas-cuenta{overflow-x:auto;margin-top:8px} #mvTablaPiezas th,#mvTablaPiezas td{white-space:nowrap;padding:6px 10px; vertical-align:middle} #mvTablaPiezas td:nth-child(5){white-space:normal} .saldo-piezas{margin-top:10px;background:var(--panel);border:1px solid var(--linea); display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .saldo-piezas div{display:flex;flex-direction:column;gap:3px;padding:10px 12px; border-right:1px solid var(--linea)} .saldo-piezas div:last-child{border-right:none} .saldo-piezas span{color:var(--texto-tenue);font-size:11px;letter-spacing:.4px; text-transform:uppercase} .saldo-piezas b{font-size:16px;font-variant-numeric:tabular-nums} .saldo-piezas .resto{margin:0;padding-top:10px;border-top:none;font-size:inherit} .saldo-piezas .resto b{color:var(--acento)} .saldo-piezas.con-sobra .resto b{color:var(--cifra-total)} /* Vincular LIQUIDACION: la misma presentacion que las piezas. */ .opcion-liquidacion{display:grid;grid-template-columns:110px 78px minmax(90px,1.4fr) 100px 80px; gap:8px;align-items:baseline;font-variant-numeric:tabular-nums} .opcion-liquidacion .n{text-align:right} .opcion-liquidacion .nombre,.opcion-liquidacion .fecha{color:var(--texto-tenue);font-size:11px} .opcion-liquidacion .facturada,.marca-facturado{color:var(--ok);font-weight:700;letter-spacing:.3px} .opcion-liquidacion .facturada{font-size:11px} #mvTablaLiquidaciones th,#mvTablaLiquidaciones td{white-space:nowrap;padding:6px 10px; vertical-align:middle} #mvTablaLiquidaciones td:nth-child(3){white-space:normal} #mvTablaLiquidaciones input.l-aplicar{width:100px;text-align:right;background:var(--campo); border:1px solid var(--control-borde);color:var(--texto);padding:4px 6px;border-radius:2px} .saldo-piezas.con-exceso .resto b{color:var(--error)} .marca-cuenta{color:var(--acento);font-size:10px;font-weight:700; letter-spacing:.4px;text-transform:uppercase;margin-left:6px} .popup-cabecera{background:var(--panel);padding:9px 14px;font-weight:600; border-bottom:1px solid #000;color:var(--acento)} .popup-cuerpo{padding:16px 14px} .popup-pie{padding:10px 14px;display:flex;justify-content:flex-end;gap:8px; border-top:1px solid #000;background:var(--barra-activa)} .opcion-cuota{display:block;width:100%;text-align:left;background:transparent; border:none;border-bottom:1px solid var(--linea);color:var(--texto); padding:12px 16px;cursor:pointer;font:inherit} .opcion-cuota:hover,.opcion-cuota:focus{background:var(--seleccion);outline:none} .opcion-cuota:last-child{border-bottom:none} .campo{display:flex;align-items:center;gap:10px;margin-bottom:10px} .campo label{width:110px;color:var(--texto-tenue)} .campo input,.campo select,.campo textarea{flex:1;min-width:0;background:var(--campo);border:1px solid var(--control-borde); color:var(--texto);padding:5px 7px;border-radius:2px} .campo textarea{font:inherit;resize:vertical} /* Observaciones del comprobante: el texto ocupa varias lineas, la etiqueta va arriba a la izquierda y no centrada en la altura. */ .campo-observaciones{align-items:flex-start;max-width:820px} .campo-observaciones label{padding-top:6px} /* Sin esto el icono del selector de fecha se dibuja negro sobre fondo oscuro y queda invisible: el campo parece no tener calendario. */ .campo input[type=date]{color-scheme:dark} /* Combo de busqueda: un input que al escribir despliega coincidencias debajo, en vez de un input de filtro mas un