/* Pantalla de piso. Se usa de pie, con guantes, con la máquina al lado.
 *
 * Todo aquí está dimensionado para el dedo, no para el ratón: los botones no
 * bajan de 56 px de alto y el texto no baja de 15 px. Una pantalla de planta que
 * obliga a acercarse a leer es una pantalla que se deja de usar en tres días.
 *
 * El color dice el estado sin leer: gris = sin orden, ámbar = montando,
 * verde = produciendo. Es la misma familia del amortiguador del programa, para
 * que quien mire las dos pantallas no tenga que aprender dos códigos. */

.mod-piso .pi-cab{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--ink)}
.mod-piso .pi-areas{display:flex;gap:0;flex-wrap:wrap}
.mod-piso .pi-areas button{font:inherit;font-size:15px;padding:12px 18px;min-height:48px;
  border:1px solid var(--rule);background:none;color:var(--meta);cursor:pointer;margin-left:-1px}
.mod-piso .pi-areas button:first-child{margin-left:0}
.mod-piso .pi-areas button[aria-current="true"]{background:var(--ink);color:var(--paper);
  border-color:var(--ink);font-weight:600;position:relative;z-index:1}
.mod-piso .pi-hora{margin-left:auto;font-size:26px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.mod-piso .pi-msg{margin:14px 0 0;padding:12px 16px;font-size:15px;
  border:1px solid var(--ink);background:#f6f6f6}
.mod-piso .pi-msg.malo{border-color:var(--alarma);color:var(--alarma);font-weight:600;background:#fff6f5}

.mod-piso .pi-rejilla{display:grid;gap:16px;margin-top:18px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.mod-piso .pi-tarjeta{border:2px solid var(--rule);padding:16px;margin:0;
  display:flex;flex-direction:column;gap:12px}
.mod-piso .pi-tarjeta h3{font-size:28px;font-weight:600;letter-spacing:-.02em;
  text-transform:none;margin:0}
.mod-piso .pi-montando{--tono:#e0b400}
.mod-piso .pi-produciendo{--tono:#30c381}
.mod-piso .pi-tarjeta.pi-montando{border-color:#e0b400}
.mod-piso .pi-tarjeta.pi-produciendo{border-color:#30c381}

.mod-piso .pi-estado{font-size:15px;line-height:1.35}
.mod-piso .pi-estado b{display:block;font-size:22px;font-weight:600}
.mod-piso .pi-estado span{display:block;color:var(--meta);margin-top:3px}
.mod-piso .pi-estado em{display:block;font-style:normal;margin-top:4px;font-size:13px}
.mod-piso .pi-libre span{font-size:17px}
.mod-piso .pi-libre em{color:var(--meta);font-size:13px}
/* Producción sin arranque capturado: no es un error, es un dato incompleto que
 * hay que poder ver sin que estorbe. */
.mod-piso .pi-ojo{color:#e0b400;font-weight:600}

.mod-piso .pi-btn{font:inherit;font-size:18px;font-weight:600;min-height:58px;
  padding:14px 18px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;width:100%;border-radius:0}
.mod-piso .pi-btn:active{transform:translateY(1px)}
.mod-piso .pi-liso{background:none;color:var(--meta);border-color:var(--rule);font-weight:500}
.mod-piso .pi-liso:hover{border-color:var(--ink);color:var(--ink)}
.mod-piso .pi-chico{font-size:14px;min-height:44px}
.mod-piso .pi-fila{display:flex;gap:10px;margin-top:12px}
.mod-piso .pi-fila .pi-btn{width:auto;flex:1}

/* La lista de órdenes del programa. Se elige, no se teclea. */
.mod-piso .pi-lista{display:flex;flex-direction:column;gap:8px}
.mod-piso .pi-of{font:inherit;text-align:left;padding:12px 14px;min-height:64px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.mod-piso .pi-of:hover{border-color:var(--ink)}
.mod-piso .pi-of b{display:block;font-size:19px;font-weight:600}
.mod-piso .pi-of span{display:block;font-size:14px;color:var(--meta);margin-top:2px}
.mod-piso .pi-of em{display:block;font-style:normal;font-size:13px;color:var(--meta);margin-top:2px}
.mod-piso .pi-nada{font-size:14px;color:var(--meta);padding:10px 0}

.mod-piso .pi-cierre label{display:block;font-size:15px;color:var(--meta)}
.mod-piso .pi-cierre input{display:block;width:100%;margin-top:8px;font:inherit;font-size:26px;
  font-weight:600;padding:12px 14px;border:2px solid var(--ink);background:var(--paper);
  color:var(--ink);border-radius:0;text-align:right;font-variant-numeric:tabular-nums}
.mod-piso .pi-cierre input:focus{outline:0}

@media (max-width:820px){
  .mod-piso .pi-rejilla{grid-template-columns:1fr}
  .mod-piso .pi-hora{margin-left:0}
}