body {
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: rgb(189, 212, 194);
    overflow: auto;
    /* Cambiado de visible a auto para controlar el desbordamiento */
    height: 100vh;
    /* Altura del viewport para controlar el scroll */
    box-sizing: border-box;
    /* Asegurar que el padding no aumente el tamaño total */
}

h4 {
    font-size: .9em;
}

#acerca {
    background-color: rgb(239, 241, 234);
}

#acerca.tr {
    border: 1px solid rgb(220, 220, 220);
    height: 50px;
    padding-left: 3px;
}

/* Variables CSS para colores consistentes */
:root {
  --verde-oscuro: #588157;
  --verde-salvia: #a3b18a;
  --azul-acero: #54778d;
  --fondo-calendario: #f8faf9;
  --borde-suave: #e0e6e2;
  --texto-bold: #2d3436;
  --blanco: #ffffff;
  --rojo-tierra: #a57d7d;
  --texto-principal: #2d3436;
}

/* Clase base para botones */
button.btn {
  width: 100px !important;
  height: 28px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
}

/* Botón Primario (Agregar / Guardar) */
.btn-primario {
  background-color: var(--azul-acero);
  color: var(--blanco);
}

.btn-primario:hover {
  background-color: #436173;
  transform: translateY(-1px);
}

/* Botón de Peligro (Eliminar / Cancelar) */
.btn-peligro {
  background-color: var(--rojo-tierra);
  color: var(--blanco);
}

.btn-peligro:hover {
  background-color: #8e6666;
}

/* Botón Secundario (Leer Excel) */
.btn-secundario {
  background-color: #7f8c8d;
  color: var(--blanco);
}

.btn-secundario:hover {
  background-color: #6a777a;
}

/* Estilos para botones que no usan clases específicas */
button:not(.btn) {
    color: rgb(255, 255, 255);
    background-color: rgb(40, 167, 69);
    border-color: rgb(40, 167, 69);
    padding: 0.375rem 0.75rem;
    vertical-align: middle;
    border: 1px solid transparent;
    position: relative;
    border-radius: 5px;
}