/* Oculta el modal por defecto */
.oculto {
  display: none;
}

/* Fondo oscuro que cubre toda la pantalla */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Caja blanca de la ventana flotante */
.contenido {
  background: white;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 90%;
  max-width: 350px;
}

/* Botón "X" para cerrar, en la esquina superior derecha */
#btnCerrar {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
}

/* Título del modal (nombre del producto) */
#tituloModal {
  margin: 0;
  padding-right: 20px;
}

/* Aumentar la altura y mejorar la estética de los campos de entrada */
.contenido input {
  padding: 10px 12px; /* Aumenta el espacio interno vertical y horizontal */
  font-size: 16px;    /* Letra un poco más legible */
  border: 1px solid #ccc; /* Un borde sutil (opcional si ya tienes uno global) */
  border-radius: 4px; /* Bordes ligeramente redondeados */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total deseado */
}

/* Estilo para hacer el botón grande y proporcionado */
.contenido button {
  padding: 12px;          /* Mayor altura y espacio interno */
  font-size: 16px;        /* Texto más legible */
  font-weight: bold;      /* Texto resaltado */
  background-color: #28a745; /* Color de fondo (puedes cambiarlo a tu gusto, ej: azul o el color de tu marca) */
  color: white;           /* Color del texto */
  border: none;           /* Sin bordes predeterminados */
  border-radius: 4px;     /* Bordes redondeados en sintonía con los inputs */
  cursor: pointer;        /* Cambia el cursor a mano al pasar por encima */
  margin-top: 5px;        /* Un pequeño espacio extra arriba */
}

/* Efecto opcional al pasar el mouse por encima del botón */
.contenido button:hover {
  background-color: #218838;
}
