/* Gesualdi — las pantallas.
 *
 * TRES COSAS QUE MANDAN ACÁ
 *
 * 1. **Se usa de noche, apurado y con las manos ocupadas.** Los botones
 *    son grandes (44px de alto mínimo, que es lo que entra un dedo) y
 *    los campos también. Una pantalla linda con botones chicos es una
 *    pantalla que hace errar el toque un viernes a las nueve.
 *
 * 2. **La plata se lee en columna.** Los números van a la derecha, con
 *    cifras de ancho fijo (tabular-nums), para que se puedan comparar de
 *    un vistazo sin leerlos uno por uno.
 *
 * 3. **Claro y oscuro.** La PC del mostrador suele estar en claro y el
 *    celular del dueño en oscuro. Los colores son variables y se dan
 *    vuelta solos; ninguno está escrito dos veces.
 */

:root {
  --fondo: #f4f3f1;
  --papel: #fff;
  --borde: #ddd9d4;
  --texto: #1c1b1a;
  --flojo: #6b6865;
  --acento: #a8321e;          /* el rojo de la pizzería */
  --acento-texto: #fff;
  --suma: #1a7a44;
  --resta: #b4321c;
  --ojo: #9a6a10;
  --ojo-fondo: #fdf5e2;
  --rojo-fondo: #fdeceb;
  --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #191817;
    --papel: #242322;
    --borde: #393734;
    --texto: #ecebe9;
    --flojo: #a09d99;
    --acento: #d8553c;
    --acento-texto: #1c1b1a;
    --suma: #5ac184;
    --resta: #f08a76;
    --ojo: #e0b357;
    --ojo-fondo: #302a1c;
    --rojo-fondo: #33211f;
    --sombra: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* El notch del celular: que el encabezado no quede abajo de la hora. */
  padding-top: env(safe-area-inset-top);
}

/* ------------------------------------------------------------ encabezado */

#encabezado {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 10;
}

#encabezado .local { font-weight: 600; }

/* El chip de la caja: se ve de lejos cuánto tendría que haber en el
 * cajón, sin entrar a la pantalla. */
.chip {
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.chip.activo { background: var(--acento); color: var(--acento-texto);
               border-color: var(--acento); }
.chip.rojo { background: var(--rojo-fondo); color: var(--resta);
             border-color: var(--resta); font-weight: 600; }
.chip.flojo { color: var(--flojo); }

/* ------------------------------------------------------------------ menú */

#menu {
  display: flex;
  gap: .25rem;
  padding: .5rem 1rem;
  overflow-x: auto;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

#menu .item {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 .9rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--flojo);
  font-size: .95rem;
  white-space: nowrap;
  cursor: pointer;
}
#menu .item:hover { background: var(--fondo); color: var(--texto); }
#menu .item.activo { background: var(--acento); color: var(--acento-texto); }

.icono svg { width: 20px; height: 20px; display: block; }

#menu .quien {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--flojo);
  white-space: nowrap;
}
#menu .quien strong { color: var(--texto); }

/* -------------------------------------------------------------- pantalla */

#pantalla { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 4rem; }
.titulo { font-size: 1.5rem; margin: .5rem 0 1rem; }
.cuerpo { display: flex; flex-direction: column; gap: 1rem; }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: var(--sombra);
}
.tarjeta h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.tarjeta hr { border: 0; border-top: 1px solid var(--borde); margin: 1.2rem 0; }

.flojo { color: var(--flojo); font-size: .9rem; }
.vacio { color: var(--flojo); font-style: italic; }
.problema { color: var(--resta); font-weight: 500; min-height: 1.2em; }
.aviso-texto {
  background: var(--fondo);
  border-left: 3px solid var(--borde);
  padding: .6rem .8rem;
  border-radius: 4px;
  margin: 0;
}

.alerta {
  background: var(--rojo-fondo);
  border: 1px solid var(--resta);
  border-radius: 10px;
  padding: .9rem 1.1rem;
}
.alerta strong { color: var(--resta); }
.alerta p { margin: .4rem 0 0; font-size: .92rem; }

/* ------------------------------------------------------------- numerones */
/*
 * Lo que el dueño mira primero. Se envuelven solos: en el celular quedan
 * de dos en dos sin que haya que decidir nada.
 */
.numerones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.numeron {
  flex: 1 1 10rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: .8rem 1rem;
  box-shadow: var(--sombra);
}
.numeron .etiqueta {
  display: block;
  font-size: .8rem;
  color: var(--flojo);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.numeron strong {
  display: block;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  margin-top: .2rem;
}
.numeron.grande strong { font-size: 1.8rem; }
.numeron.rojo strong { color: var(--resta); }
.numeron.rojo { border-color: var(--resta); background: var(--rojo-fondo); }
.numeron.ojo strong { color: var(--ojo); }
.numeron.ojo { border-color: var(--ojo); background: var(--ojo-fondo); }

/* --------------------------------------------------------------- campos */

.campo { display: block; margin-bottom: .8rem; }
.campo > span {
  display: block;
  font-size: .85rem;
  color: var(--flojo);
  margin-bottom: .25rem;
}
.campo input, .campo select {
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
}
.campo input:focus, .campo select:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
/* Los montos en cifras de ancho fijo, también al escribirlos. */
.campo input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }

.dos { display: flex; gap: .75rem; flex-wrap: wrap; }
.dos > * { flex: 1 1 10rem; }

/* -------------------------------------------------------------- botones */

button {
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--papel);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--acento); }
button:disabled { opacity: .5; cursor: default; }

button.fuerte {
  background: var(--acento);
  color: var(--acento-texto);
  border-color: var(--acento);
  font-weight: 500;
}
button.flojo { color: var(--flojo); }
button.chico { min-height: 32px; padding: 0 .6rem; font-size: .85rem; }

.botones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.periodos { display: flex; gap: .4rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- tablas */

.tabla-scroll { overflow-x: auto; margin: 0 -1.1rem; padding: 0 1.1rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
th { font-size: .78rem; color: var(--flojo); text-transform: uppercase;
     letter-spacing: .03em; font-weight: 600; }
/* El motivo de un movimiento puede ser largo: es la única que se parte. */
td:nth-child(3), td:nth-child(4) { white-space: normal; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.suma { color: var(--suma); }
.resta { color: var(--resta); }
.ojo { color: var(--ojo); }
tr.anulado td { opacity: .45; text-decoration: line-through; }

/* La barrita del informe por rubro: un rubro que se lleva la mitad de la
 * plata se ve antes de leer el número. */
.barra { width: 7rem; height: 8px; background: var(--fondo);
         border-radius: 999px; overflow: hidden; }
.barra .relleno { height: 100%; background: var(--acento); }

/* --------------------------------------------------------------- rubros */

.rubros { display: flex; flex-direction: column; gap: .5rem; }
.rubro { display: flex; gap: .5rem; }
.rubro input {
  flex: 1;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
}

.resumen-texto {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .8rem;
  margin: .8rem 0 0;
  font-size: .85rem;
  white-space: pre-wrap;
  overflow-x: auto;
}
.oculto { display: none; }

/* ------------------------------------------------------------- diálogos */

dialog {
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--papel);
  color: var(--texto);
  padding: 1.5rem;
  width: min(92vw, 26rem);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h1 { font-size: 1.25rem; margin: 0 0 1rem; }
dialog p { margin: 0 0 1rem; }
dialog button { width: 100%; margin-top: .5rem; }
dialog.preguntar p { white-space: pre-line; }
dialog .botones button { width: auto; flex: 1; }
dialog.resultado { width: min(92vw, 34rem); }

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

#avisos {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 100;
  width: min(92vw, 30rem);
}
.aviso {
  padding: .7rem 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  font-size: .95rem;
  background: var(--papel);
  border: 1px solid var(--borde);
}
.aviso.bien { border-left: 4px solid var(--suma); }
.aviso.mal { border-left: 4px solid var(--resta); }
.aviso.ojo { border-left: 4px solid var(--ojo); }

/* ------------------------------------------------------------- el celular */

@media (max-width: 560px) {
  #menu .quien { width: 100%; margin: .25rem 0 0; }
  #menu { flex-wrap: wrap; }
  .numeron strong { font-size: 1.2rem; }
  .numeron.grande strong { font-size: 1.5rem; }
}