/* El aviso del modo de supuestos. Ámbar, arriba del todo y sin botón de cerrar:
   mientras la herramienta funcione con datos inventados, quien la mire tiene
   que saberlo. Si esto molesta, la solución es que conteste cocina. */
.supuestos-aviso {
  position: sticky; top: 0; z-index: 200;
  padding: 10px 16px;
  /* El ambar de marca (#b4762a) con texto blanco da 3,77:1 y no llega al 4,5
     que necesita un texto normal. Un tono mas hondo de la MISMA familia sube a
     4,58:1 sin cambiar de color: sigue siendo el ambar de la casa.
     Y este aviso, precisamente, es el que no puede costar leerlo. */
  background: #a06a24; color: #fff;
  font-family: var(--tipo-texto, system-ui), sans-serif;
  font-size: .85rem; line-height: 1.45; text-align: center;
}
/* El aviso es un <button> de verdad (supuestos.js), porque si no, no hay forma
   de abrirlo con el teclado. Como tal, hay que quitarle lo que trae de fábrica.

   Va con `button.` delante a propósito: así gana por ESPECIFICIDAD y no por
   orden de carga. `.supuestos-aviso` a secas está escrito también en
   planificador.css, que carga después, y en /plato el orden de las hojas no es
   el mismo que en /pedidos. Un reset que dependa del orden se cae el día que
   alguien mueva un <link>. */
button.supuestos-aviso {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
  font: inherit;
  font-size: .85rem;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.supuestos-aviso b { font-weight: 700; }

/* Cada dato supuesto, marcado allí donde se enseñe. */
[data-supuesto="si"] { color: #b4762a; }
[data-supuesto="si"]::before { content: "≈ "; }