/* ===================================================================== FS - Pantallas propias Lo que es de una pantalla sola y de ninguna otra: la pared, la ficha de reparacion, el telefono, el ingreso, los permisos del perfil y las colas de Logistica. Va despues de componentes.css a proposito: asi una pantalla ajusta un componente sin tener que ganarle por especificidad. Parte de la hoja de estilos de FS, que se sirve en varios archivos enlazados en orden desde src/views/_estilos.php. El orden importa: la cascada es la concatenacion de todos ellos. ===================================================================== */ /* -------------------------------------------------------------------- Pantalla de pared (quiosco) Letra grande para leer de lejos en un TV; color por semáforo al costado. -------------------------------------------------------------------- */ /* La pared ocupa la pantalla y no scrollea: nadie va a arrastrar un televisor colgado. Todo lo que esta fuera de servicio tiene que entrar en una sola pantalla, asi que si no entra pared.js achica el conjunto entero hasta que entra, en vez de recortarlo o partirlo en paginas. Antes se recortaba: la grilla fijaba tres filas y las tarjetas quedaban cortadas a la mitad de un renglon, con la zona y la prioridad tapadas. */ .pared { display: flex; flex-direction: column; box-sizing: border-box; background: var(--fondo); color: var(--texto); margin: 0; padding: 18px 24px 12px; height: 100vh; overflow: hidden; } .pared-cab { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 2px solid var(--borde); padding-bottom: 10px; } .pared-cab h1 { font-size: 2rem; font-weight: 700; } .pared-sala { font-size: 1.3rem; color: var(--texto-suave); } /* Las dos cuentas, con el color de sus tarjetas: cuantas en reparacion y cuantas trabadas. Es lo primero que se mira al pasar. */ .pared-total { margin-left: auto; display: flex; gap: 10px; font-size: 2.2rem; font-weight: 700; } .pared-total-rep, .pared-total-pend { padding: 0 14px; border-radius: 10px; } .pared-total-rep { background: var(--rojo); color: #fff; } .pared-total-pend { background: var(--ambar); color: #1b1205; } .pared-vacio { font-size: 2rem; color: var(--verde); padding: 3rem 0; } /* Aviso de que lo que se ve esta viejo: el servidor no contesta y la pantalla quedo con la ultima foto buena. Lo pone y lo saca pared.js. Franja roja, ancho completo y letra grande: el televisor esta lejos y nadie lo mira de cerca, asi que tiene que gritar. Sin esto, una pared congelada se ve exactamente igual que una al dia, que es la peor forma de fallar. */ .pared-aviso { margin: 0 0 12px; padding: 10px 18px; border-radius: 8px; background: var(--rojo); color: #fff; font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; text-align: center; } /* El bloque que pared.js achica cuando no entra. El zoom se aplica aca y no en el para que el encabezado y el pie queden a su tamaño: lo que sobra son las tarjetas, no los rotulos. Una columna vertical por sala, lado a lado. Antes era una grilla sola con las salas una debajo de la otra, y una sala con una sola maquina se comia un renglon entero: quedaban tarjetas enormes al lado de huecos. */ .pared-salas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--pared-salas, 1), minmax(0, 1fr)); align-items: start; gap: 18px; } .pared-sala-grupo { min-width: 0; } /* El rotulo de la sala manda: en la pared de todas, lo primero que hace el ojo es ubicar de que sala esta mirando. Antes era un texto gris chico y las tres franjas se leian como una sola grilla. Ahora es una banda con fondo propio, letra grande y una linea azul abajo que cierra la columna. */ .pared-sala-titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 5px 14px; border-radius: 8px 8px 0 0; /* Azul y no el fondo de panel: en el tema oscuro el panel es el MISMO color que las tarjetas, asi que la banda se confundia con ellas. */ background: var(--acento-suave); border-bottom: 3px solid var(--acento); font-size: 1.5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto); } /* El nombre de la sala lleva a su propia pared. Se dibuja igual que antes -es un rotulo, no un boton- y solo se subraya al pasar por encima. */ .pared-sala-enlace { color: inherit; text-decoration: none; } .pared-sala-enlace:hover { color: var(--texto); text-decoration: underline; } .pared-sala-enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* Cuantas hay en esa sala. Es el numero que se lee cruzando el taller -"que tan mal esta cada una"-, asi que va grande y no como una etiqueta chica al costado del nombre. */ .pared-sala-cuenta { margin-left: auto; padding: 1px 16px; border-radius: 999px; background: var(--fondo-panel); border: 1px solid var(--borde-fuerte); color: var(--texto); font-size: 1.7rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; } /* Adentro de cada sala, las tarjetas apiladas. Con una sola sala -un televisor dedicado, /pared?sala=rebisco- no hay columnas que llenar, asi que las reparte en las que decida pared.js. */ .pared-grid { display: grid; grid-template-columns: repeat(var(--pared-cols, 1), minmax(0, 1fr)); gap: 8px; } /* La tarjeta es apaisada: en una columna angosta y alta, apilar cinco renglones deja tarjetas altisimas y pocas por pantalla. Tres zonas en una fila -quien es, que le pasa, como esta- entran en la mitad del alto. Las columnas de los costados se miden por su contenido y no en ch: con un ancho fijo, el UID se partia en dos renglones y "En reparacion" quedaba en "En repara...". El medio se queda con lo que sobra y ahi si se corta con puntos, porque una falla puede tener 255 caracteres. */ .pared-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; min-width: 0; background: var(--fondo-panel); border: 1px solid var(--borde); border-left: 8px solid var(--borde-fuerte); border-radius: 8px; padding: 8px 12px; /* Red de seguridad: si por lo que fuera la columna quedara mas angosta que la tarjeta, se corta adentro y no se desborda por el costado. */ overflow: hidden; } /* El color dice el ESTADO, no la demora: rojo lo que esta en reparacion, ambar lo que quedo trabado esperando un repuesto o una autorizacion. Es la pregunta que se hace mirando la pared desde lejos: que se esta trabajando y que esta parado. La demora sigue estando, en dias, adentro de la tarjeta. */ /* La tarjeta entera es un enlace a la ficha. Hereda el color y no se subraya: en la pared tiene que verse igual que antes; lo que cambia es que desde una computadora se puede entrar de un clic. */ a.pared-card { color: inherit; text-decoration: none; } a.pared-card:hover { border-color: var(--borde-fuerte); background: var(--fondo-hover); } a.pared-card:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; } .pared-card.estado-en_reparacion { border-left-color: var(--rojo); } .pared-card.estado-pendiente { border-left-color: var(--ambar); } .pared-card.estado-en_reparacion .pared-dias, .pared-card.estado-en_reparacion .pared-estado { color: var(--rojo); } .pared-card.estado-pendiente .pared-dias, .pared-card.estado-pendiente .pared-estado { color: var(--ambar); } /* Al llegar una actualización SSE, sólo titila la tarjeta afectada. El borde lateral conserva el color del estado; el halo azul señala el cambio sin confundir reparación con pendiente. Cinco pulsos duran algo más de 3 s. */ @keyframes pared-card-actualizada { 0%, 100% { background: var(--fondo-panel); box-shadow: none; } 50% { background: var(--acento-suave); box-shadow: 0 0 0 4px var(--acento), 0 0 22px var(--acento); } } .pared-card.es-actualizada { position: relative; z-index: 1; animation: pared-card-actualizada .65s ease-in-out 5; } @media (prefers-reduced-motion: reduce) { .pared-card.es-actualizada { animation: none; background: var(--acento-suave); box-shadow: 0 0 0 4px var(--acento); } } .pared-quien { min-width: 0; } .pared-que { display: flex; flex-direction: column; min-width: 0; } .pared-como { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; } .pared-uid { font-size: 1.5rem; font-weight: 700; line-height: 1.1; white-space: nowrap; } .pared-dias { font-size: 1.2rem; font-weight: 700; white-space: nowrap; } /* Una linea cada uno, cortado con puntos: dos tarjetas con textos de distinto largo tienen que medir lo mismo. */ .pared-equipo, .pared-estado, .pared-datos > span, .pared-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* El equipo comparte renglon con la zona: se corta el primero, que es el que trae nombres larguisimos, y no la zona, que es una palabra. */ .pared-equipo { min-width: 0; flex: 0 1 auto; } .pared-estado { font-size: .85rem; font-weight: 700; } /* Primer renglon: que maquina es. Es el dato que se busca junto con el UID, asi que va grande. */ .pared-datos { display: flex; flex-wrap: nowrap; overflow: hidden; align-items: baseline; gap: 4px 12px; font-size: 1.2rem; font-weight: 700; color: var(--texto); white-space: nowrap; } /* Segundo renglon: donde esta parada y con que urgencia. La falla no esta en la pared -es texto libre de 255 caracteres y esta a un clic, en la ficha-, asi que este renglon es el que dice para donde salir a caminar. */ .pared-meta { display: flex; flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 10px; font-size: .95rem; font-weight: 700; color: var(--texto-suave); white-space: nowrap; } .pared-zona { color: var(--texto); } /* Un punto entre la zona y la prioridad: de lejos, dos textos pegados por un espacio se leen como uno solo. */ .pared-meta > span + span::before { content: '· '; color: var(--texto-tenue); } .pared-meta > .pared-prioridad.es-alta::before { content: none; } /* La prioridad normal es la de casi todas: se dice, pero en gris y sin pastilla. La ALTA es la excepcion y por eso grita. */ .pared-prioridad.es-alta { padding: 0 7px; border-radius: 999px; background: var(--rojo); color: #fff; } .pared-pie { margin-top: 12px; color: var(--texto-tenue); font-size: 1rem; text-align: right; } /* -------------------------------------------------------------------- Ficha de reparacion: la cabecera El titulo con el UID, el equipo y el bloque de estado con los dias. Estaba metido adentro de la seccion de la pared, sin encabezado: son dos pantallas distintas que no comparten nada. -------------------------------------------------------------------- */ /* El nombre de la sala al lado del titulo, con el MISMO estilo: hereda tamaño, peso y color del h1. Va en por semantica, pero se ve igual. */ .titulo-sala { font-size: inherit; font-weight: inherit; color: inherit; margin-left: 8px; } .titulo-ficha { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .ficha-titulo, .ficha-leyenda { margin: 0 0 6px; font-size: 1.85rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--texto); line-height: 1.15; } /* Subtítulo de equipo dentro de la ficha de reparación: UID destacado y modelo */ .titulo-equipo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ficha-uid { font-size: 1.25rem; font-weight: 700; color: var(--acento); } .titulo-equipo small { font-size: 1rem; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; } /* Contra un título grande el marcador queda diminuto: se agranda un poco y se alinea con el UID en vez de con la base de la línea. */ .titulo-equipo .reincide { margin-left: 0; font-size: .8rem; padding: 4px 8px; align-self: center; } /* La barra de estado de una ficha: la pastilla, el contador de días y la aclaración al lado. Son los tres datos que contestan "¿cómo está esto?" y se leen de una sola pasada, así que se dibujan como un conjunto y no como tres elementos que quedaron juntos. Lo que los unifica es la ALTURA y no el tamaño de letra: el número va en mono y la etiqueta en la tipografía del texto, y a igual font-size la caja del número se ve más chica. Con una altura mínima común y el padding solo horizontal, las dos cajas miden lo mismo y cada texto puede tener el tamaño que le corresponde. El radio redondo es el de la pastilla, que es la forma con la que esta app dice "estado". Vale para las tres fichas que tienen esta barra —la de la reparación, la del slot y el alta—, que hasta ahora se parecían pero no coincidían. */ .ficha-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ficha-estado .etq-grande, .ficha-estado .dias-grande { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; line-height: 1; } .ficha-estado .etq-grande { font-size: 1.02rem; font-weight: 700; } .ficha-estado .dias-grande { font-size: 1.2rem; } .ficha-estado > .tenue { font-size: .95rem; } @media (max-width: 700px) { /* Un punto menos de alto y de letra: en el teléfono la barra comparte renglón con el UID y con la sala, y a tamaño completo empujaba el resto de la cabecera fuera de la primera pantalla. */ .ficha-estado .etq-grande, .ficha-estado .dias-grande { min-height: 32px; padding: 0 13px; } .ficha-estado .etq-grande { font-size: .95rem; } .ficha-estado .dias-grande { font-size: 1.1rem; } .ficha-estado > .tenue { font-size: .9rem; } } .grilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; } /* --------------------------------------------------------------------- Cada REQUI, su caja La primera version ponia un rotulo suelto entre las partes. No alcanzaba: sin caja ni fondo, las siete partes seguian leyendose como una sola lista y el rotulo parecia un renglon mas. Ahora cada requisicion es un bloque cerrado -borde, encabezado con fondo y una barra de color a la izquierda-, y lo que se ve primero es cuantos pedidos distintos hay. --------------------------------------------------------------------- */ .partes-grupo { margin-bottom: 14px; border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-chico); overflow: hidden; } .partes-grupo:last-child { margin-bottom: 0; } .partes-grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0; padding: 8px 12px; background: var(--fondo-suave); border-bottom: 1px solid var(--borde); font-size: .85rem; } .partes-grupo-requi { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .partes-grupo-rotulo { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); } /* El numero es el dato que se busca, asi que es lo mas grande del encabezado. El rotulo "REQUI" se lee una vez y despues se saltea. */ .partes-grupo-requi .mono { font-size: 1.05rem; font-weight: 700; color: var(--texto); } /* El punto rojo de SIN REPARACIÓN, al lado del número: avisa que adentro de esa requisición hay una pieza sin arreglo, que plegado no se ve porque el resumen la cuenta como resuelta. El encabezado alinea por línea base y un punto vacío quedaría colgado del piso de la cifra: se lo sube al medio, y se lo agranda apenas, porque acá compite con un número de 1.05rem y no con el texto chico del dashboard. */ .partes-grupo-requi .etq-punto { align-self: center; width: 9px; height: 9px; } .partes-grupo-cuenta { color: var(--texto-suave); font-size: .8rem; } /* Lo que dice el encabezado cuando el grupo esta plegado: cuantas partes hay y si queda trabajo adentro. Sin esto habria que abrir cada requisicion para saber si tiene algo pendiente, que es justo lo que se quiere evitar. */ .partes-grupo-resumen { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .partes-grupo-pendientes { padding: 1px 7px; border-radius: 999px; background: var(--ambar-bg); color: var(--ambar); font-size: .72rem; font-weight: 700; } .partes-grupo-listas { color: var(--verde); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } /* El grupo se abre y se cierra: es un

. Se le saca el triangulito propio del navegador y se usa uno propio, que ademas se da vuelta al abrir, como en el menu "Mas" de las pestañas. */ .partes-grupo > summary { cursor: pointer; list-style: none; } .partes-grupo > summary::-webkit-details-marker { display: none; } .partes-grupo > summary:hover { background: var(--fondo-hover); } .partes-grupo > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; } .partes-grupo-flecha { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--borde-fuerte); border-radius: 50%; background: var(--fondo-panel); color: var(--acento); font-size: .85rem; line-height: 1; transition: transform .15s ease, background .15s ease, border-color .15s ease; } /* Con todos los grupos plegados, esta flecha es el unico control a la vista de la seccion: tiene que leerse como un boton y no como un adorno. Por eso el circulo con borde y el azul de los controles, y no un triangulito gris. */ .partes-grupo > summary:hover .partes-grupo-flecha, .partes-grupo > summary:focus-visible .partes-grupo-flecha { border-color: var(--acento); background: var(--acento-suave); } .partes-grupo[open] > summary .partes-grupo-flecha { transform: scaleY(-1); } /* Plegado, la caja es solo su encabezado: sin el borde de abajo queda una linea suelta debajo del titulo. */ .partes-grupo:not([open]) > .partes-grupo-cab { border-bottom: none; } /* La lista de partes vive adentro de la caja: el aire se lo da el grupo. */ .partes-grupo > .partes-reparacion { padding: 0 12px; } .parte-reparacion-cab, .parte-reparacion-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .parte-reparacion-cab > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .parte-reparacion-meta { margin-top: 5px; font-size: .8rem; } .parte-envio-editor { margin-top: 10px; } .parte-envio-editor > summary { width: fit-content; list-style: none; } .parte-envio-editor > summary::-webkit-details-marker { display: none; } .parte-envio-editor form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 9px; padding: 10px; border-left: 3px solid var(--acento); background: var(--fondo-suave); } .parte-envio-editor .campo { margin: 0; } .parte-requi-editor { margin-top: 10px; } .parte-requi-editor > summary { width: fit-content; list-style: none; } .parte-requi-editor > summary::-webkit-details-marker { display: none; } .parte-requi-editor form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 9px; padding: 10px; border-left: 3px solid var(--acento); background: var(--fondo-suave); } .parte-requi-editor .campo { margin: 0; } .parte-reparacion-acciones { display: flex; align-items: center; gap: 7px; /* La marca de recepcion ahora dice fecha y demora, y con el estado al lado no entra en un telefono. Las etiquetas no se parten -son pildoras-, asi que se pasa la que sobra al renglon siguiente. */ flex-wrap: wrap; justify-content: flex-end; } .form-quitar-parte { margin: 0; } /* -------------------------------------------------------------------- Pantalla del telefono: subir una foto por QR Estaba al final de fs.css, despues de la impresion y sin encabezado. -------------------------------------------------------------------- */ /* ==================================================================== "Usar el movil": QR en la compu y pagina de subida en el telefono ==================================================================== */ /* Lo que fs.js esconde cuando hay JavaScript (queda como respaldo sin el). */ html.js .solo-sin-js { display: none; } /* --- Enlace en la ficha, junto a la subida de adjuntos --- */ .adjuntos-movil { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--borde); } .btn-movil { white-space: nowrap; } /* --- Pantalla del QR (compu) --- */ .movil-qr-grid { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; } .movil-qr-svg { flex: 0 0 auto; width: 240px; max-width: 60vw; padding: 12px; background: #fff; /* el QR siempre sobre blanco, aun en oscuro */ border: 1px solid var(--borde); border-radius: var(--radio); } .movil-qr-svg .qr { display: block; width: 100%; height: auto; } .movil-qr-texto { flex: 1 1 260px; min-width: 240px; } .movil-pasos { margin: 0 0 14px; padding-left: 22px; line-height: 1.7; } .movil-vence { margin: 0 0 14px; } .movil-url-det summary { cursor: pointer; color: var(--acento); } .movil-url { word-break: break-all; background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 8px 10px; font-size: .85rem; } .movil-recibido { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde); } .movil-recibido-titulo { color: var(--verde); font-size: 1.05rem; margin: 0 0 12px; } .movil-recibido-lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .movil-recibido-lista li { width: 96px; height: 96px; border: 1px solid var(--borde); border-radius: var(--radio-chico); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--fondo-suave); } .movil-recibido-lista img { width: 100%; height: 100%; object-fit: cover; } .movil-recibido-lista .adj-doc { font-size: .75rem; padding: 6px; text-align: center; } /* --- Pagina en el telefono (documento autonomo, fuera del layout) --- */ .movil-pagina { min-height: 100dvh; margin: 0; display: flex; align-items: flex-start; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 18px 24px; background: var(--fondo); color: var(--texto); } .movil-card { width: 100%; max-width: 460px; background: var(--fondo-panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px 20px 26px; text-align: center; } .movil-titulo { margin: 0 0 16px; font-size: 1.3rem; } .movil-maquina { margin: 0 0 20px; display: flex; flex-direction: column; gap: 3px; } .movil-uid { font-size: 1.5rem; font-weight: 700; } .movil-form { display: flex; flex-direction: column; gap: 12px; } .movil-o { margin: 2px 0; } .movil-nota { margin-top: 14px; } .movil-estado { font-size: 1.05rem; font-weight: 600; padding: 12px 14px; border-radius: var(--radio-chico); margin: 0 0 14px; } .movil-estado-ok { color: var(--verde); background: var(--verde-bg); } .movil-estado-mal { color: var(--ambar); background: var(--ambar-bg); } /* Botones grandes, para el pulgar. */ .btn-grande { display: block; width: 100%; padding: 16px; font-size: 1.1rem; box-sizing: border-box; } /* ==================================================================== Visor de adjuntos (lightbox) Fondo oscuro siempre, independiente del tema: una foto se mira mejor sobre negro. fs.js lo crea y lo muestra; sin JavaScript no existe. ==================================================================== */ /* -------------------------------------------------------------------- Login -------------------------------------------------------------------- */ .pagina-login { display: flex; flex-direction: column; min-height: 100vh; background: var(--fondo); } .caja-login { width: 100%; max-width: 380px; margin: auto; padding: 30px 28px 34px; background: var(--fondo-panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); } .caja-login h1 { font-size: 1.25rem; text-align: center; } .caja-login .sub { text-align: center; color: var(--texto-tenue); font-size: .86rem; margin: 5px 0 20px; } .caja-login label { display: block; font-size: .82rem; font-weight: 600; color: var(--texto-suave); margin: 12px 0 4px; } .caja-login .btn { margin-top: 20px; } /* -------------------------------------------------------------------- Lista de permisos del perfil -------------------------------------------------------------------- */ .lista-permisos { list-style: none; margin: 0; padding: 0; font-size: .89rem; } .lista-permisos li { padding: 3px 0; } .lista-permisos .permitido { color: var(--texto); } .lista-permisos .negado { color: var(--texto-tenue); } /* -------------------------------------------------------------------- Logística: las dos colas Las dos listas se agrupan por sala porque el recorrido se hace sala por sala. La fila de la sala es un encabezado adentro de la tabla y no una tabla por sala: así el "marcar todo" sigue alcanzando a todas las piezas de la pantalla, que es como se trabaja cuando se sale a buscar. -------------------------------------------------------------------- */ .fila-sala td { background: var(--fondo-suave); font-weight: 600; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--texto-suave); border-top: 2px solid var(--borde-fuerte); } .fila-sala-n { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto-tenue); margin-left: 8px; } /* La que nadie miró todavía. El borde y no un fondo: la fila tiene que seguir leyéndose igual que las demás, y lo que se quiere señalar es que falta una acción, no que haya un problema con la pieza. */ .fila-sin-gestionar td:first-child { box-shadow: inset 3px 0 0 var(--rojo); } /* La marca de compra y su "Quitar" conviven en la celda sin saltar de renglón: son una sola cosa leída de un vistazo. */ .celda-compra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .form-linea { display: inline; } /* Deshacer no se ofrece con el mismo peso que hacer. */ .btn-plano { background: none; border-color: transparent; color: var(--texto-tenue); padding-left: 4px; padding-right: 4px; } .btn-plano:hover { color: var(--rojo); border-color: var(--borde); }