/* =============================================================================
   PASAR ALGO SECRETO — «cer__»
   ========================================================================== */

/* LA PARED, DICHA EN LA PANTALLA. No es decoración: quien lo use tiene que
   saber que hay dos cosas distintas protegiéndole, y cuál hace cuál. */
.cer__pared{
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--acento, #2f6f4f);
  background: var(--papel-tenue, #f3f4f6);
  font-size: .9375rem;
}

.cer__pestanas{ display: flex; gap: .5rem; margin: 0 0 1.25rem; }
.cer__pestana{
  flex: 1 1 0; min-height: 3rem;
  border: 1px solid var(--linea, #e5e7eb); border-radius: .5rem;
  background: var(--papel, #fff); color: inherit;
  font: inherit; cursor: pointer;
}
/* EL QUE ESTA PUESTO SE DISTINGUE POR EL BORDE Y EL GROSOR, no solo por el
   color — E-044, alternativa no cromática. */
.cer__pestana--puesta{
  border-color: var(--acento, #2f6f4f); border-width: 2px; font-weight: 600;
}

/* LA PALABRA DE UN SOLO USO. Se va a copiar a mano o a dictar por teléfono:
   grande, de paso fijo, y con aire entre letras. Una letra que se lee mal aquí
   es un cofre que no abre allá. */
.cer__palabra{
  margin: 0 0 1rem;
  padding: 1rem;
  border: 2px dashed var(--acento, #2f6f4f); border-radius: .5rem;
  background: var(--papel, #fff);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem; letter-spacing: .08em; line-height: 1.7;
  text-align: center; overflow-wrap: anywhere;
}

.cer__escribir{
  display: block; width: 100%; min-height: 3rem;
  margin: .35rem 0 .75rem;
  padding: 0 .75rem;
  border: 1px solid var(--linea, #e5e7eb); border-radius: .5rem;
  background: var(--papel, #fff); color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem; letter-spacing: .06em;
}

.cer__secundario{
  background: var(--papel, #fff); color: inherit;
  border-color: var(--linea, #e5e7eb);
}