body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* #map { */
  /* height: 100%; */
/* } */

a {
  color: #00B7FF;
}

.icon-flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: rotateX("180");
  filter: FlipH;
  -ms-filter: "FlipH";
}

/* Estilos para el teclado virtual */
.virtual-keyboard {
  background-color: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 12px;
  padding: 20px;
  margin-top: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.key {
  min-width: 60px;
  height: 60px;
  border: 2px solid #ced4da;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: #495057;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.key:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  transform: scale(1.05);
}

.key:active {
  background-color: #dee2e6;
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.key-wide {
  min-width: 120px;
}

.key-control {
  min-width: 80px;
  background-color: #e9ecef;
  font-size: 16px;
}

.key-active {
  background-color: #007bff !important;
  color: white !important;
  border-color: #007bff !important;
}

/* TECLADO VIRTUAL PROFESIONAL PARA PANTALLA TÁCTIL DE 8 PULGADAS */

/* Modal que ocupa toda la pantalla */
.keyboard-modal {
  z-index: 9999;
}

.keyboard-modal .modal-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.keyboard-modal.show .modal-dialog {
  transform: translateY(0);
}

.keyboard-content-fullscreen {
  width: 100%;
  height: 100vh;
  border: none;
  border-radius: 0;
  background: #f8f9fa;
}

.keyboard-header {
  background: #ffffff !important;
  border-bottom: 2px solid #e9ecef;
  min-height: 80px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Área de visualización del texto */
/* .text-preview-container { */
  /* Eliminamos border-bottom y min-height ya que ahora está integrado en keyboard-header */
/* } */

.text-preview-label {
  font-weight: 600;
  font-size: 14px;
}

.text-preview-display {
  background: #f8f9fa !important;
  border: 2px solid #dee2e6 !important;
  min-height: 60px;
  font-size: 24px;
  font-weight: 500;
  color: #495057;
  display: flex;
  align-items: center;
  word-break: break-all;
  line-height: 1.3;
  width: 100%;
}

.text-preview-text {
  font-size: 40px;
  color: #212529;
  font-family: 'Courier New', monospace;
  flex-grow: 1;
}

.text-preview-display .text-muted {
  font-size: 40px;
  font-style: italic;
  flex-grow: 1;
}

/* Asegurar que el botón de cerrar no se encoja */
.flex-shrink-0 {
  flex-shrink: 0;
}

/* Gap entre elementos para mejor espaciado */
.gap-3 {
  gap: 1rem;
}

/* Contenedor principal del teclado */
.virtual-keyboard-touch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 15px;
  padding: 20px;
}

/* Filas del teclado */
.keyboard-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
}

.keyboard-control-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
}

/* BOTONES GRANDES PARA TÁCTIL - 8 PULGADAS */
.key-touch {
  min-width: 90px;
  min-height: 90px;
  max-width: 110px;
  max-height: 110px;
  width: 100px;
  height: 100px;
  border: 2px solid #dee2e6;
  background: #ffffff;
  border-radius: 12px;
  cursor: pointer;
  font-size: 32px;
  font-weight: 600;
  color: #343a40;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Efectos hover/touch para botones */
.key-touch:hover, .key-touch:focus {
  background: #f8f9fa;
  border-color: #adb5bd;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.key-touch:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: #e9ecef;
  border-color: #adb5bd;
}

/* Botones de control especiales */
.key-control-touch {
  min-width: 110px !important;
  background: #6c757d !important;
  color: white !important;
  border-color: #6c757d !important;
}

.key-control-touch:hover {
  background: #5a6268 !important;
  border-color: #5a6268 !important;
  transform: translateY(-1px);
}

.key-control-touch:active {
  background: #545b62 !important;
  border-color: #4e555b !important;
  transform: translateY(0px) scale(0.98);
}

/* Botón de espacio extra grande */
.key-space-touch {
  min-width: 280px !important;
  background: #ffffff !important;
  color: #343a40 !important;
  border-color: #ced4da !important;
  font-size: 28px !important;
  border-width: 3px !important;
}

.key-space-touch:hover {
  background: #f8f9fa !important;
  border-color: #adb5bd !important;
}

.key-space-touch:active {
  background: #e9ecef !important;
  border-color: #adb5bd !important;
}

/* Botón de cerrar destacado */
.key-close-touch {
  background: #dc3545 !important;
  color: white !important;
  border-color: #dc3545 !important;
  min-width: 130px !important;
}

.key-close-touch:hover {
  background: #c82333 !important;
  border-color: #bd2130 !important;
  transform: translateY(-1px);
}

.key-close-touch:active {
  background: #bd2130 !important;
  border-color: #b21f2d !important;
  transform: translateY(0px) scale(0.98);
}

/* Estado activo para Shift y Símbolos */
.key-active {
  background: #495057 !important;
  color: white !important;
  border-color: #495057 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.key-active:hover {
  background: #343a40 !important;
  border-color: #343a40 !important;
}

/* Animaciones de entrada suave */
.keyboard-modal.fade:not(.show) .modal-dialog {
  transform: translateY(100%);
  opacity: 0;
}

.keyboard-modal.show .modal-dialog {
  opacity: 1;
}

/* Optimización para pantallas pequeñas (8 pulgadas) */
@media (max-width: 1024px) and (max-height: 768px) {
  .key-touch {
    width: 85px;
    height: 85px;
    min-width: 80px;
    min-height: 80px;
    font-size: 28px;
  }
  
  .key-control-touch {
    min-width: 100px !important;
  }
  
  .key-space-touch {
    min-width: 240px !important;
    font-size: 24px !important;
  }
  
  .key-close-touch {
    min-width: 115px !important;
  }
  
  .keyboard-row {
    gap: 10px;
    margin-bottom: 8px;
  }
  
  .virtual-keyboard-touch {
    gap: 12px;
    padding: 15px;
  }

  /* Ajustes para el área de texto en pantallas de 8 pulgadas */
  .text-preview-display {
    min-height: 50px;
    font-size: 20px;
  }
  
  .keyboard-header {
    min-height: 70px;
    padding: 15px !important;
  }
  
  .gap-3 {
    gap: 0.75rem;
  }
}

/* Para pantallas muy pequeñas */
@media (max-width: 800px) and (max-height: 600px) {
  .key-touch {
    width: 70px;
    height: 70px;
    min-width: 65px;
    min-height: 65px;
    font-size: 24px;
  }
  
  .key-control-touch {
    min-width: 85px !important;
  }
  
  .key-space-touch {
    min-width: 200px !important;
    font-size: 20px !important;
  }
  
  .key-close-touch {
    min-width: 100px !important;
  }

  /* Ajustes adicionales para el área de texto en pantallas muy pequeñas */
  .text-preview-display {
    min-height: 40px;
    font-size: 18px;
  }
  
  .text-preview-label {
    font-size: 12px;
  }
  
  .keyboard-header {
    min-height: 60px;
    padding: 10px !important;
  }
  
  .gap-3 {
    gap: 0.5rem;
  }
  
  .btn-lg.px-4.py-3 {
    padding: 0.75rem 1rem !important;
  }
}