/* Incentivos Comerciales D'ELIZA.
   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 {
  --tinta: #1b1f24;
  --suave: #5b6570;
  --linea: #dfe3e8;
  --fondo: #f7f8fa;
  --papel: #ffffff;
  --acento: #16607a;
  --gana: #0d7040;
  --gana-fondo: #e8f6ee;
  --grave: #a12020;
  --grave-fondo: #fdecec;
  --ok-fondo: #eaf5ec;
  --falta: #9a6a10;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
}

main { padding: 1.5rem; max-width: 1500px; margin: 0 auto; }

/* ---------------------------------------------------------- barra */

.barra {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem 1.5rem;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.marca { font-weight: 700; color: var(--acento); text-decoration: none; }
.barra nav { display: flex; gap: 1rem; }
.barra nav a { color: var(--suave); text-decoration: none; }
.barra nav a:hover { color: var(--acento); }
.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;
}

/* ---------------------------------------------------------- avisos */

.aviso {
  padding: .7rem 1rem; margin: 1rem 1.5rem; border-radius: 6px;
  border-left: 4px solid var(--falta); background: #fff8e8;
}
.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; }

.mes { display: block; overflow-x: auto; white-space: nowrap; }
.mes td.total { font-weight: 700; }
.mes tfoot td { border-top: 2px solid var(--tinta); font-weight: 600; }
td.gana { color: var(--gana); background: var(--gana-fondo);
          font-weight: 600; }

.chica td, .chica th { padding: .35rem .5rem; font-size: .92rem; }
tr.suma td { border-top: 2px solid var(--tinta); font-weight: 700; }

.focos tr.logrado { background: var(--gana-fondo); }
.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: #eef2f6; 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);
}
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: #fff; 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;
}
.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: inline-flex; gap: .4rem; align-items: center;
                margin-right: 1rem; font-size: .9rem; }
.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; }

.capas { display: grid; gap: .8rem; margin-top: 1.5rem;
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.capa {
  display: block; padding: 1rem 1.2rem; text-decoration: none;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 8px; border-left: 4px solid var(--acento);
}
.capa:hover { background: #f2f7f9; }
.capa-titulo { display: block; font-weight: 700; color: var(--tinta); }
.capa-desc { display: block; font-size: .86rem; color: var(--suave);
             margin-top: .2rem; }

.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: #eef2f6; color: var(--suave); border-radius: 999px;
}
.chip.elegido { background: var(--acento); color: #fff; }
.chip.grupo { background: #f0ece2; color: #6b5a2a; }

.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 rgba(0, 0, 0, .12);
}
.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: #f0ece2; color: #6b5a2a; 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; }