/* =============================================================================
   La pantalla del cofre

   Los campos son anchos y la letra monoespaciada donde hay valores: aquí se
   pega un cofre de doscientas y pico letras y se escribe una palabra clave, y
   las dos cosas se leen mejor con una tipografía que distinga el cero de la O.
   ============================================================================= */

.campo { display: block; margin: 0 0 1rem; }
.campo label { display: block; font-size: .9rem; margin-bottom: .3rem; }
.campo input, .campo textarea {
  width: 100%; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--grafito);
}
.campo textarea {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .88rem; line-height: 1.5; resize: vertical;
  word-break: break-all;
}
.campo input:focus, .campo textarea:focus {
  outline: 2px solid var(--ambar); outline-offset: 1px;
}
.campo .ayuda { display: block; color: var(--grafito-tenue); font-size: .82rem;
                margin-top: .3rem; line-height: 1.5; }
.tenue { color: var(--grafito-tenue); font-weight: normal; }

/* La pista se ve, y decirlo una vez en la ayuda no basta: va marcado en la
   propia etiqueta del campo, que es lo que se mira al escribirlo. */
/* 3.19:1 en un AVISO. Lo que advierte de que algo se ve sin cifrar tiene que
   leerse mejor que el resto, no peor. */
.aviso-linea { color: var(--ambar-texto); font-weight: 600; }

.recuerda {
  background: var(--ambar-papel); border-left: 3px solid var(--ambar);
  padding: .8rem 1rem; margin: 1rem 0; font-size: .9rem; line-height: 1.6;
  border-radius: 0 var(--radio) var(--radio) 0;
}