body { font-family: Arial, sans-serif; margin: 18px; background: #f5f7fa; color: #333; }
h2 { color: #0056b3; margin-bottom: 10px; }
label { display: inline-block; width: 120px; font-weight: bold; }
input { margin: 6px 8px 6px 0; padding: 7px; border-radius: 6px; border: 1px solid #ccc; }
button { margin: 6px 6px 6px 0; padding: 8px 12px; border-radius: 8px; border: none; background:#007bff; color: #fff; cursor: pointer; font-weight:600; }
button.secondary { background:#6c757d; }
button.ghost { background: transparent; color: #007bff; border: 1px solid #007bff; }
button:hover { filter: brightness(.95); }
.row { display:flex; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.summary { margin-top:10px; }
table { width:100%; border-collapse: collapse; margin-top: 14px; background:white; }
th, td { border:1px solid #ddd; padding:8px; text-align:center; }
th { background:#007bff; color:white; }
hr { margin:12px 0; border: none; border-top: 1px solid #eee; }

/* modal general */
.modal { position:fixed; left:0; top:0; width:100%; height:100%; background: rgba(0,0,0,0.45); z-index:1000; justify-content:center; align-items:center; display:flex; }
.modal-content { background: white; padding:18px; border-radius:10px; width:90%; max-width:540px; max-height:85vh; overflow:auto; box-shadow: 0 6px 30px rgba(0,0,0,0.2); }
.card { display:inline-block; background:#f2f2f2; padding:12px 14px; margin:8px; border-radius:10px; cursor:pointer; font-weight:600; }
.card:hover { background:#007bff; color:white; transform:translateY(-3px); transition: all .12s ease; }
.keypad { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:12px; }
.keypad button { padding:14px 8px; font-size:18px; border-radius:8px; border:none; background:#007bff; color:white; }
.list-item { display:flex; justify-content:space-between; align-items:center; padding:8px; border-radius:8px; border:1px solid #e6e6e6; margin:6px 0; }
.small { font-size:13px; padding:6px 8px; border-radius:6px; }

/* sections hidden initially */
.hidden-section { display:none; margin-top:14px; }

.row input + button {
  width: 120px; /* mismo ancho para todos los botones al lado de un input */
}

th.total-general {
  background: #800080 !important;
  color: white !important;
}

.btnAccion {
  min-width: 125px;       /* Asegura que todos tengan el mismo ancho mínimo */
  padding: 8px 12px;
  text-align: center;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}

.inputLargo {
  width: 243px;         /* Ajusta según el ancho de tus botones */
  padding: 6px 10px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  text-align: center;
}

.labelInline {
  white-space: nowrap;
}

.btnLargo {
  min-width: 180px; /* Ajusta según lo que necesites */
  padding: 10px 16px;
  font-size: 16px;
  text-align: center;
}




/* new css*/

body.tecladoAbierto {
  padding-bottom: 120px; /* espacio extra para que no se corte el contenido */
}

body.tecladoAbierto .row {
  margin-bottom: 2px; /* reduce espacio vertical si se ve apretado */
}

body.tecladoAbierto input {
  font-size: 17px; /* mejora visibilidad en móvil */
}

.full-height {
  min-height: 100%;
}

input, button {
  touch-action: manipulation;
}

/* Detecta cuando el teclado está abierto en móviles */
body.tecladoAbierto {
  padding-bottom: 120px; /* espacio para que no se tape contenido */
}

/* Reduce márgenes verticales si el teclado está activo */
body.tecladoAbierto .row {
  margin-bottom: 4px;
}

/* Mejora visibilidad de inputs en móviles */
body.tecladoAbierto input {
  font-size: 17px;
}

/* Asegura que el contenedor principal no use vh que se rompe en móviles */
body, html {
  min-height: 100%;
  height: auto;
}

.btnCopiarAlineado {
  display: inline-block;
  width: 40px; /* solo icono */
  padding: 8px;
  text-align: center;
  
}