/* Estilos de la "pantalla" 3270 renderizada (compartidos por la demo y el preview). */
.c2j-screen {
    position: relative;
    background: #000;
    color: #33ff66;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 16px;
    line-height: 1.3em;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 4px;
    box-shadow: 0 0 24px rgba(51, 255, 102, 0.15);
}
.c2j-fld {
    position: absolute;
    white-space: pre;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.3em;
    height: 1.3em;
    box-sizing: border-box;
}
.c2j-label { background: transparent; }
.c2j-input {
    background: #001500;
    border: none;
    border-bottom: 1px solid #225522;
    outline: none;
    padding: 0;
    margin: 0;
}
.c2j-input:focus { background: #002800; }
/*
 * Campo protegido: en un 3270 no se distingue de un rotulo, porque no lo es. El elemento sigue
 * siendo un <input> —para que el programa pueda desprotegerlo en el ciclo siguiente escribiendo
 * su byte de atributo— pero no debe ANUNCIARSE como enterable. Sin estas reglas un campo
 * protegido se veia con el mismo fondo y el mismo subrayado que uno editable, y al enfocarlo se
 * iluminaba igual: la pantalla invitaba a escribir donde el 3270 no deja.
 */
.c2j-input[readonly] {
    background: transparent;
    border-bottom-color: transparent;
    cursor: default;
}
.c2j-input[readonly]:focus { background: transparent; }
.c2j-bright { font-weight: bold; filter: brightness(1.35); }
.c2j-dark { color: transparent !important; }
.c2j-reverse { filter: invert(1); }
.c2j-underline { text-decoration: underline; }
.c2j-blink { animation: c2jblink 1s step-start infinite; }
@keyframes c2jblink { 50% { opacity: 0; } }