/* teclado.css — el teclado en pantalla de los terminales táctiles.
 *
 * Va pegado abajo y ocupa todo el ancho: en una pantalla táctil de planta no
 * hay ratón para colocarlo, y una tecla que se falla es un carácter de más en
 * la contraseña. Las teclas son grandes a propósito (46 px de alto mínimo, que
 * es lo que mide un dedo con guante) y no hay nada que se pueda arrastrar.
 */

.teclado {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20000;
  background: #1f2430; border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -10px 34px rgba(0,0,0,.34);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px;
  font-family: inherit; touch-action: manipulation; user-select: none;
  -webkit-user-select: none;
}
.teclado[hidden] { display: none; }
.teclado-fila { display: flex; gap: 6px; justify-content: center; }

.teclado-tecla {
  flex: 1 1 0; min-width: 0; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.10); border-radius: 9px;
  background: #343b4c; color: #f1f5f9;
  font-size: 1.08rem; font-weight: 600; font-family: inherit;
  cursor: pointer; padding: 0 4px;
  transition: background .08s, transform .08s;
}
.teclado-tecla:active, .teclado-tecla.pulsada { background: var(--c-primary, #4f46e5); transform: translateY(1px); }
.teclado-tecla.esp   { background: #272d3b; font-size: .9rem; flex-grow: 1.4; }
.teclado-tecla.ancha { flex-grow: 5; }
.teclado-tecla.on    { background: #475569; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.teclado-tecla.fija  { background: #64748b; color: #fff; }
.teclado-tecla.ok    { background: #16a34a; color: #fff; }
.teclado-tecla.ok:active { background: #15803d; }
.teclado-tecla.borrar{ background: #7f3b3b; }

/* La barra de arriba: qué se está escribiendo y el botón de cerrar. Sin ella
   nadie sabe en qué campo caen las teclas cuando hay dos en la pantalla. */
.teclado-barra { display: flex; align-items: center; gap: 10px; padding: 0 4px 2px; }
.teclado-campo { flex: 1; min-width: 0; color: #cbd5e1; font-size: .78rem;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teclado-campo b { color: #fff; font-weight: 600; }
.teclado-cerrar { border: 0; background: transparent; color: #cbd5e1; font-size: 1.1rem;
                  cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.teclado-cerrar:hover { background: rgba(255,255,255,.10); color: #fff; }

/* Numérico: teclas más grandes y centradas, que es un teclado de calculadora. */
/* El ancho va FIJO: con left 50 % y right auto, un fixed se encoge a lo que
   ocupa su contenido y salía un teclado de un dedo de ancho (28/09/2026). */
.teclado.num { width: min(460px, calc(100vw - 16px)); left: 50%; right: auto; transform: translateX(-50%);
               border-radius: 14px 14px 0 0; border: 1px solid rgba(255,255,255,.14); gap: 8px; }
.teclado.num .teclado-fila { gap: 8px; }
.teclado.num .teclado-tecla { min-height: 66px; font-size: 1.7rem; }
.teclado.num .teclado-tecla.esp { font-size: 1.2rem; }

/* El campo que está recibiendo las teclas se marca: en una pantalla de planta
   el cursor parpadeando no se ve desde medio metro. */
.teclado-destino { outline: 2px solid var(--c-primary, #4f46e5) !important; outline-offset: 1px; }

/* Nada puede quedar debajo del teclado. La altura real la pone el JavaScript
   en --teclado-h cada vez que cambia de distribución. */
body.teclado-abierto { --teclado-h: 300px; }
body.teclado-abierto .swal2-container { padding-bottom: var(--teclado-h) !important; }
body.teclado-abierto .swal2-popup { max-height: calc(100vh - var(--teclado-h) - 24px); overflow: auto; }
body.teclado-abierto .login-page  { align-items: flex-start; padding-top: 3vh;
                                    padding-bottom: calc(var(--teclado-h) + 16px); }
body.teclado-abierto .modal       { padding-bottom: var(--teclado-h); }

/* El botón que enciende el teclado en el login. */
.teclado-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
               width: 100%; margin-top: 10px; padding: 10px; cursor: pointer;
               border: 1px dashed #cbd5e1; border-radius: 9px; background: #f8fafc;
               color: #475569; font-size: 13.5px; font-weight: 600; font-family: inherit; }
.teclado-btn:hover { border-color: var(--c-primary, #4f46e5); color: var(--c-primary, #4f46e5); }
.teclado-btn.on { border-style: solid; border-color: var(--c-primary, #4f46e5);
                  background: #eef2ff; color: var(--c-primary, #4f46e5); }