/* Incentivos Comerciales D'ELIZA. ⚠️ TODO color del sistema sale de una ficha, y las fichas se definen SOLO aca. Mas abajo no hay ni un hex suelto: si aparece uno, esa regla se queda igual cuando alguien cambia de paleta y la pantalla sale con dos temas encima. La paleta viaja en `data-paleta` sobre el , que pone el context processor con lo que eligio quien entro (`servicios/apariencia.py`). Un valor desconocido --o ninguno-- cae en `:root`, que es la de siempre: la pantalla nunca se queda sin colores. Las seis pasan 4.5:1 de contraste en texto normal. Pensado para una pantalla de escritorio con tablas anchas: el mes son catorce columnas y no hay forma de que entren en un telefono sin esconder algo. En el telefono la tabla se desliza. */ :root, [data-paleta="actual"] { color-scheme: light; /* Actual -- la de siempre, clara. */ --tinta: #1b1f24; --suave: #5b6570; --linea: #dfe3e8; --fondo: #f7f8fa; --papel: #ffffff; --papel2: #eef2f6; --acento: #16607a; --sobre-acento: #ffffff; --acento-suave: #f2f7f9; --gana: #0d7040; --gana-fondo: #e8f6ee; --grave: #a12020; --grave-fondo: #fdecec; --ok-fondo: #eaf5ec; --falta: #9a6a10; --falta-fondo: #fff8e8; --grupo: #6b5a2a; --grupo-fondo: #f0ece2; --sombra: rgba(0, 0, 0, .12); } [data-paleta="indigo"] { color-scheme: light; /* Clara, mas cromatica. */ --tinta: #191b2e; --suave: #55597a; --linea: #dcdff0; --fondo: #f4f5fb; --papel: #ffffff; --papel2: #eaedf8; --acento: #383da6; --sobre-acento: #ffffff; --acento-suave: #eef0fb; --gana: #12704f; --gana-fondo: #e6f4ee; --grave: #a8203f; --grave-fondo: #fceaee; --ok-fondo: #e9f3ee; --falta: #8a6510; --falta-fondo: #fdf6e6; --grupo: #6b5a2a; --grupo-fondo: #f0ece2; --sombra: rgba(25, 27, 46, .16); } [data-paleta="arena"] { color-scheme: light; /* Clara y calida; cansa menos en jornada larga. */ --tinta: #241d16; --suave: #6b5f52; --linea: #e0d8cc; --fondo: #f4f1ec; --papel: #fffefb; --papel2: #efeae1; --acento: #8c4030; --sobre-acento: #fffefb; --acento-suave: #f7ece8; --gana: #2f6b46; --gana-fondo: #e7f1e9; --grave: #9b2226; --grave-fondo: #f9e8e5; --ok-fondo: #eaf1e9; --falta: #8a6510; --falta-fondo: #fbf2df; --grupo: #5f4d21; --grupo-fondo: #eee5d3; --sombra: rgba(36, 29, 22, .16); } [data-paleta="pizarra"] { color-scheme: dark; /* Oscura y fria. */ --tinta: #e6ebef; --suave: #9dabb5; --linea: #2c353c; --fondo: #14181c; --papel: #1b2126; --papel2: #232b31; --acento: #61b6d3; --sobre-acento: #0f1418; --acento-suave: #1b2c33; --gana: #5cc79a; --gana-fondo: #16302a; --grave: #f0958b; --grave-fondo: #331f1e; --ok-fondo: #172b26; --falta: #d7ab5a; --falta-fondo: #2c2617; --grupo: #d3c08f; --grupo-fondo: #2b2820; --sombra: rgba(0, 0, 0, .5); } [data-paleta="noche"] { color-scheme: dark; /* Oscura y calida. */ --tinta: #ece7de; --suave: #aaa192; --linea: #332f28; --fondo: #171512; --papel: #201d18; --papel2: #2a2620; --acento: #dc9c48; --sobre-acento: #1a1611; --acento-suave: #302516; --gana: #82c48c; --gana-fondo: #1e2c1f; --grave: #ec9585; --grave-fondo: #33201a; --ok-fondo: #1f2b20; --falta: #c2b273; --falta-fondo: #2c2718; --grupo: #cbbb8e; --grupo-fondo: #2b271e; --sombra: rgba(0, 0, 0, .55); } [data-paleta="contraste"] { color-scheme: light; /* Para pantalla con reflejo o vista cansada. */ --tinta: #000000; --suave: #3a3a3a; --linea: #8a8a8a; --fondo: #ffffff; --papel: #ffffff; --papel2: #ededed; --acento: #0b4fbf; --sobre-acento: #ffffff; --acento-suave: #e4ecfb; --gana: #0a5c2e; --gana-fondo: #d6efe0; --grave: #b00014; --grave-fondo: #ffe0e2; --ok-fondo: #d9f0e2; --falta: #6b4a00; --falta-fondo: #fff2cc; --grupo: #4a3c00; --grupo-fondo: #f2e9c8; --sombra: rgba(0, 0, 0, .35); } * { box-sizing: border-box; } body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; } /* Todo enlace, tenga clase o no. Los nombres de los vendedores en la tabla del mes no la tienen, y salian con el azul del navegador: ilegible sobre la paleta Pizarra. */ a { color: var(--acento); } main { padding: 1.5rem; max-width: 1500px; margin: 0 auto; } /* ---------------------------------------------------------- barra */ /* El hilo toma el acento de la paleta. Tres sistemas que se parecen y una franja de color arriba: se sabe en cual estas sin leer nada. */ .hilo { height: 3px; background: var(--acento); } .barra { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .5rem 1.5rem; background: var(--papel); border-bottom: 1px solid var(--linea); } .marca { font-weight: 700; color: var(--acento); text-decoration: none; font-size: 1.05rem; } /* El mes, en la barra y una sola vez. */ .mes-chip { display: flex; align-items: center; gap: .3rem; } .mes-chip label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mes-chip input { padding: .25rem .5rem; font-size: .88rem; border-radius: 999px; background: var(--papel2); } .mes-chip button { margin-top: 0; padding: .28rem .7rem; font-size: .82rem; border-radius: 999px; background: none; color: var(--suave); border: 1px solid var(--linea); } .mes-chip button:hover { background: var(--papel2); color: var(--acento); filter: none; } /* «You are here»: sin esto los dos destinos se ven igual. */ .tabs { display: flex; gap: .25rem; } .tab { color: var(--suave); text-decoration: none; font-size: .95rem; padding: .35rem .75rem; border-radius: 6px; border: 1px solid transparent; } .tab:hover { background: var(--papel2); color: var(--acento); } .tab.activo { background: var(--papel2); color: var(--tinta); font-weight: 600; border-color: var(--linea); } .barra .quien { margin-left: auto; display: flex; align-items: center; gap: .6rem; color: var(--suave); font-size: .9rem; } .enlace { background: none; border: 0; padding: 0; cursor: pointer; color: var(--suave); text-decoration: underline; font: inherit; } /* ------------------------------------------------- cabecera de pagina */ .cabecera-pag { display: flex; align-items: flex-end; gap: .8rem 1.5rem; flex-wrap: wrap; padding-bottom: .7rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--linea); } .cabecera-pag h1 { margin: 0; font-size: 1.55rem; } .cabecera-pag .acciones { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; } /* El regreso NOMBRA su destino. Objetivo tactil de verdad, no un texto de 12 px que hay que cazar con el dedo. */ .volver { margin: 0 0 .6rem; } .volver a { display: inline-flex; align-items: center; min-height: 40px; padding: .2rem .1rem; color: var(--acento); text-decoration: none; font-size: .92rem; font-weight: 500; } .volver a:hover { text-decoration: underline; } /* ---------------------------------------------------------- avisos */ .aviso { padding: .7rem 1rem; margin: 1rem 1.5rem; border-radius: 6px; border-left: 4px solid var(--falta); background: var(--falta-fondo); } .aviso.grave { border-color: var(--grave); background: var(--grave-fondo); } .aviso.ok { border-color: var(--gana); background: var(--ok-fondo); } .avisos { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; } .avisos .aviso { margin: .5rem 0; } /* ---------------------------------------------------------- tablas */ table { border-collapse: collapse; width: 100%; background: var(--papel); } th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--linea); text-align: left; } th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); font-weight: 600; vertical-align: bottom; } th.mini { font-size: .68rem; text-transform: none; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.total { font-weight: 700; } /* --------------------------------------------------- la tabla del mes */ /* Se lleva todo el ancho: las catorce columnas entran apretadas en una pantalla normal y no hay barra que deslizar. El `overflow-x` queda de red por si la pantalla es mas angosta de lo previsto. */ .env-tabla { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; overflow-x: auto; } .env-tabla > table { border: 0; } .tabla-mes { border-collapse: separate; border-spacing: 0; white-space: nowrap; font-size: .88rem; } .tabla-mes th, .tabla-mes td { padding: 0 .45rem; height: 36px; vertical-align: middle; border-bottom: 1px solid var(--linea); } .tabla-mes td:first-child, .tabla-mes th:first-child { padding-left: .8rem; } .tabla-mes td:last-child, .tabla-mes th:last-child { padding-right: .8rem; } .tabla-mes thead th { position: sticky; top: 0; z-index: 2; height: 30px; background: var(--papel2); vertical-align: bottom; } .tabla-mes thead tr:nth-child(2) th { top: 30px; } /* El nombre pegado a la izquierda: cuando la tabla si tiene que deslizarse, sin esto se pierde de quien es la fila a la segunda columna. Es lo que mas rompe estas tablas. */ .tabla-mes .fija { position: sticky; left: 0; z-index: 1; background: var(--papel); box-shadow: 1px 0 0 var(--linea); white-space: nowrap; } .tabla-mes thead .fija { z-index: 3; background: var(--papel2); } .tabla-mes tbody tr:hover td, .tabla-mes tbody tr:hover .fija { background: var(--papel2); } /* «Que hizo» y «que se le paga» son dos bloques distintos. Catorce columnas planas no se leen. */ .corte { border-left: 2px solid var(--linea); } .tabla-mes .cero { color: var(--suave); } .tabla-mes .ganado { font-weight: 600; } /* Solo el total lleva fondo. Antes se pintaban las cinco columnas de bonos y media pantalla quedaba verde: con todo resaltado no se distingue nada. */ .col-total { background: var(--gana-fondo); font-weight: 700; border-left: 2px solid var(--linea); } .tabla-mes tfoot td { background: var(--papel2); border-top: 2px solid var(--tinta); border-bottom: 0; font-weight: 600; } /* --------------------------------------------- el mes en el telefono */ .lista-mes { display: grid; gap: .5rem; } .reng { display: block; text-decoration: none; color: inherit; background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: .7rem .9rem; } .reng:active { background: var(--papel2); } .reng-alto { display: flex; align-items: baseline; gap: .6rem; } .reng-cod { color: var(--suave); font-size: .8rem; font-variant-numeric: tabular-nums; } .reng-nom { font-weight: 600; } .reng-bono { margin-left: auto; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .reng-bono.cero { color: var(--suave); font-weight: 500; } .reng-bajo { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .6rem; } .mini-dato .r { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); } .mini-dato .v { font-weight: 600; font-variant-numeric: tabular-nums; } /* ------------------------------------------------- resumen del mes */ .resumen { display: grid; gap: .8rem; margin: 1.2rem 0 0; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .resumen h2 { margin: 0 0 .4rem; border: 0; padding: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 600; } .resumen .cifra { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; } .pie-cifra { color: var(--suave); font-size: .82rem; margin: .3rem 0 0; } .estado { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; border-radius: 999px; padding: .1rem .6rem; border: 1px solid var(--linea); background: var(--papel2); } .estado::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--falta); } .estado.cerrado::before { background: var(--gana); } /* --------------------------------------------------- avisos plegados */ .avisos { margin-bottom: 1.2rem; } .avisos summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 40px; } .avisos summary::-webkit-details-marker { display: none; } .avisos summary::after { content: "▾"; margin-left: auto; color: var(--suave); font-size: .7rem; } .avisos[open] summary::after { content: "▴"; } .insignia { background: var(--grave); color: var(--papel); border-radius: 999px; font-size: .72rem; font-weight: 700; padding: .05rem .5rem; } /* La accion destructiva no comparte fila con una normal. */ .peligrosa { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linea); } .chica td, .chica th { padding: .35rem .5rem; font-size: .92rem; } tr.suma td { border-top: 2px solid var(--tinta); font-weight: 700; } /* -------------------------------------------- la pantalla del vendedor */ .tira { display: grid; gap: .7rem; margin-bottom: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .ficha { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: .7rem .9rem; } .ficha.destacada { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); } .ficha .r { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin-bottom: .15rem; } .ficha .v { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* La meta, debajo de la venta con IVA. Chica y en gris: acompana al monto, no compite con el. Sin esto un 100% no dice contra que es. */ .ficha .meta { display: block; margin-top: .3rem; font-size: .75rem; color: var(--suave); font-variant-numeric: tabular-nums; } /* Las dos tarjetas lado a lado. Estiradas a todo el ancho, el monto quedaba a un metro de su rotulo. */ .dos { display: grid; gap: 1rem; align-items: start; margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .tarjeta.ancha { display: block; } .tarjeta h2 { margin: 0 0 .6rem; border: 0; padding: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 600; } .tabla-chica { width: 100%; border-collapse: collapse; font-size: .9rem; background: none; } .tabla-chica td { padding: .4rem 0; border-bottom: 1px solid var(--linea); } .tabla-chica td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tabla-chica tr:last-child td { border-bottom: 0; } .tabla-chica tr.suma td { border-top: 2px solid var(--tinta); border-bottom: 0; padding-top: .55rem; } .tabla-chica .desc { color: var(--suave); font-size: .8rem; } .tabla-chica .cero { color: var(--suave); } .tabla-chica .ganado { font-weight: 600; } /* El avance no es solo un numero: tambien es una forma. Se ve de un golpe cual esta cerca y cual ni de lejos. */ .medidor { display: block; height: 3px; border-radius: 999px; background: var(--linea); margin-top: .2rem; overflow: hidden; } .medidor i { display: block; height: 100%; background: var(--acento); } .medidor.lleno i { background: var(--gana); } .focos { font-size: .9rem; } .focos th { padding: 0 .5rem .4rem; } .focos td { padding: .4rem .5rem; } .focos td.avance, .focos th.avance { min-width: 5.5rem; } .focos tr.logrado td:first-child { box-shadow: inset 3px 0 0 var(--gana); } .focos .marca-ok { color: var(--gana); font-weight: 700; } .focos .cero { color: var(--suave); } .focos tr.detalle td { border-bottom: 0; padding-top: 0; font-size: .82rem; color: var(--suave); } .pieza { display: inline-block; margin-right: .9rem; } .etiqueta { font-size: .7rem; background: var(--papel2); color: var(--suave); padding: .05rem .4rem; border-radius: 999px; margin-left: .3rem; } .falta { color: var(--falta); font-style: italic; } /* ---------------------------------------------------------- piezas */ .encabezado-mes { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; } .encabezado-mes h1 { margin: 0 0 1rem; } .ir-al-mes { display: flex; gap: .5rem; align-items: center; font-size: .9rem; color: var(--suave); } .tarjetas { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 2rem; } .tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: .8rem 1.1rem; min-width: 150px; } .tarjeta.grande { border-color: var(--acento); } .tarjeta .rotulo { display: block; font-size: .78rem; color: var(--suave); } .tarjeta .cifra { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; } .indice { display: flex; gap: 1rem; margin: 1rem 0 2rem; } .indice a { color: var(--acento); } section { margin-bottom: 2.5rem; } h2 { border-bottom: 2px solid var(--linea); padding-bottom: .3rem; } .nota { color: var(--suave); font-size: .88rem; } .sub { color: var(--suave); margin-top: -.6rem; } .volver a { color: var(--suave); text-decoration: none; } input, select { padding: .35rem .5rem; border: 1px solid var(--linea); border-radius: 4px; font: inherit; background: var(--papel); /* Un `size="50"` en el comentario del cierre empujaba la PAGINA entera de lado en el telefono, y con ella la barra de arriba. */ max-width: 100%; } input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; } button { padding: .45rem 1rem; border: 0; border-radius: 5px; background: var(--acento); color: var(--sobre-acento); font: inherit; cursor: pointer; margin-top: .7rem; } button:hover { filter: brightness(1.1); } .fila-alta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; } .fila-alta button { margin-top: 0; } .copiar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; } .copiar button { margin-top: 0; } .vendedor-focos { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: .6rem 1rem; margin-bottom: .6rem; } .vendedor-focos summary { cursor: pointer; font-weight: 600; } .vendedor-focos summary small { color: var(--suave); font-weight: 400; margin-left: .5rem; } /* ---------------------------------------------------------- entrar */ .pantalla-entrar { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; } .pantalla-entrar .hilo { position: fixed; top: 0; left: 0; right: 0; } .tarjeta-entrar { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 2rem; width: 100%; max-width: 340px; } .tarjeta-entrar h1 { margin: 0; color: var(--acento); } .tarjeta-entrar label { display: block; margin-top: 1rem; font-size: .85rem; color: var(--suave); } .tarjeta-entrar input { width: 100%; margin-top: .25rem; } .tarjeta-entrar button { width: 100%; margin-top: 1.5rem; padding: .6rem; } /* ---------------------------------------------------------- cierre */ .cierre { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 1rem 1.2rem; margin-top: 2rem; } .cierre h2 { margin-top: 0; } .cierre label { display: flex; gap: .4rem; align-items: center; margin-right: 1rem; font-size: .9rem; max-width: 34rem; } .cierre label input { flex: 1; min-width: 0; } .cierre .forzar { display: inline-flex; max-width: none; } .forzar { color: var(--grave); } button.peligro { background: var(--grave); } /* ------------------------------------------------ configuracion por capas */ .migas { display: flex; gap: .5rem; align-items: center; font-size: .88rem; color: var(--suave); margin-bottom: 1rem; } .migas a { color: var(--acento); text-decoration: none; } .migas .actual { color: var(--tinta); font-weight: 600; } /* La barra lateral de Configuracion. Siempre a la vista: saltar de Cuotas a Focos es un clic, no tres. */ .config { display: grid; gap: 1.2rem; align-items: start; } @media (min-width: 760px) { .config { grid-template-columns: 210px minmax(0, 1fr); } } .config-cuerpo { min-width: 0; } .rail { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .3rem; } @media (min-width: 760px) { .rail { flex-direction: column; overflow: visible; padding: .3rem; background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; } } .capa { display: block; white-space: nowrap; text-decoration: none; color: var(--suave); font-size: .92rem; font-weight: 500; padding: .45rem .7rem; border-radius: 6px; border: 1px solid transparent; min-height: 40px; } .capa:hover { background: var(--papel2); color: var(--tinta); } .capa.activo { background: var(--papel2); color: var(--tinta); font-weight: 600; border-color: var(--linea); } .capa small { display: block; font-weight: 400; font-size: .74rem; color: var(--suave); } /* En el telefono la lateral es una tira que se desliza, y ahi el pie de cada capa solo ocupa lugar. */ @media (max-width: 759px) { .capa small { display: none; } .capa { display: flex; align-items: center; } } .ayuda { max-width: 65ch; } tr.inactivo { opacity: .55; } /* ---------------------------------------------------------- buscador */ .buscador { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; } .buscador-caja { display: block; font-size: .85rem; color: var(--suave); } .buscador-caja input { width: 100%; max-width: 460px; margin-top: .25rem; padding: .5rem .7rem; font-size: 1rem; } .chip { margin: 0 .2rem 0 0; padding: .2rem .6rem; font-size: .8rem; background: var(--papel2); color: var(--suave); border-radius: 999px; } .chip.elegido { background: var(--acento); color: var(--sobre-acento); } .chip.grupo { background: var(--grupo-fondo); color: var(--grupo); } .resultados { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; margin-top: .7rem; } .resultado { display: flex; gap: .7rem; align-items: baseline; width: 100%; margin: 0; padding: .4rem .6rem; text-align: left; background: var(--fondo); color: var(--tinta); border-radius: 4px; } .resultado:hover { background: var(--gana-fondo); filter: none; } .resultado.ya-esta { opacity: .5; cursor: default; } .resultado code { color: var(--acento); font-weight: 600; min-width: 7em; } .r-nombre { flex: 1; } .r-unidad { font-size: .78rem; color: var(--suave); } .r-vendido { font-size: .75rem; color: var(--suave); } .r-sinficha { font-size: .72rem; color: var(--falta); border: 1px solid var(--falta); border-radius: 999px; padding: 0 .35rem; } /* La lista del buscador que vive adentro del renglón del foco. Va FLOTANDO por encima de la tabla: si empujara las filas, elegir un foco movería los otros nueve de lugar mientras se los está mirando. */ .celda-buscador { position: relative; } .celda-buscador .flotante { position: absolute; z-index: 20; top: 100%; left: 0; min-width: 30rem; max-width: 90vw; background: var(--papel); border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 6px 18px var(--sombra); } .celda-buscador .flotante:empty { display: none; } .celda-buscador .resultados { margin-top: 0; padding: .3rem; } .celda-buscador .nota { margin: 0; padding: .5rem .7rem; } /* Lo marcado con las flechas se ve igual que lo que está bajo el mouse: son la misma cosa y Enter elige eso. */ .resultado.marcada { background: var(--gana-fondo); } /* El grupo se distingue del producto suelto de un vistazo: elegirlo trae varios códigos sumados con sus factores, y eso no es lo mismo que elegir un producto. */ .resultado.es-grupo .r-nombre { font-weight: 600; } .r-etiqueta { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; background: var(--grupo-fondo); color: var(--grupo); border-radius: 999px; padding: .05rem .45rem; min-width: 7em; text-align: center; } tr.recien input { background: var(--gana-fondo); } .dos-columnas { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; } .dos-columnas table { width: auto; min-width: 180px; } /* ---------------------------------------------------------- descargas */ /* El boton del paquete y el del reporte individual. Es un enlace, no un